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.
Your router declaration is wrong. It should me more like this:
App.Router.map(function() {
this.resource('dogs');
this.resource('dog', {path: '/:dog_id'});
});