CODEWITHSUNDEEP
ember.jsember-router
Parijat Kalia
Parijat Kalia

Reputation: 5085

EmberJS Dynamic segment error

As most Emberists would know, I am in the middle of tearing my hair apart at the moment, trying to overcome this vertical wall that EmberJS has so that I can get to the paradise at it's peak.

Here is what I have at the moment: 

  <script type="text/x-handlebars" data-template-name="dogs">
    <h2> Pick a stack to view its cards </h2>
    <ul class="nav">
      {{#each model}}
      <li>{{#linkTo 'dog' this}} {{name}} {{/linkTo}}</li>
      {{/each}}
  </script>

My routes are defined like this :

App.Router.map(function(){
this.resource('dogs);
this.resource('dog', '/:dog_id');
});

And accordingly, the Model hook for DogRoute is defined as this : 

App.DogRoute = EmberRoute.Extend({
   model: function(params){
   return App.Dog.find(params.id);
   }

});

And finally the model is pretty basic in itself:

App.Dog = DS.Model.extend({
    name = DS.attr('string')
});

DS is a bunch of fixtures in my case, so I am not going to bother writing this down. However, this doesn't work and I don't know why. Here is the error I keep getting when I visit dogs route, and expect a bunch of links to dog being rendered:

ember-...rc.5.js (line 356) uncaught exception: More context objects were passed than there are dynamic segments for the route: dog

Can anybody point out what is being done wrong here ?

Note: If I remove the dynamic segments and simply render a dog route inside of my dogs handlebar, (this from handlebar gets taken off) then the links (dog names) do get rendered. However, I need these routes to be dynamic segments and not just hyperlinks with unique ids autogenerated by ember/handlebars.

Upvotes: 0

Views: 3876

Answers (2)

intuitivepixel
intuitivepixel

Reputation: 23322

The error you get

ember-...rc.5.js (line 356) uncaught exception: More context objects were passed than there are dynamic segments for the route: dog

might be related to your route mappings. You should rather define the routes like this:

App.Router.map(function() {
  this.resource('dogs', function() {
    this.resource('dog', {path: '/:dog_id'});
  });
});

And furthermore since this is ember's default behaviour, (see here under dynamic models):

App.DogRoute = EmberRoute.Extend({
  model: function(params){
    return App.Dog.find(params.id);
  }
});

you don't need to define it explicitly, so you can remove it. The rest seams to be correct as far I can see. I've also put togheter a working jsbin, have a look.

Hope it helps.

Upvotes: 1

Gevious
Gevious

Reputation: 3252

Your router declaration is wrong. It should me more like this:

App.Router.map(function() {
  this.resource('dogs');
  this.resource('dog', {path: '/:dog_id'});
});

Upvotes: 3

Related Questions