How to manage 2 nested dynamic segments with ember? - ember.js

Question

EDIT: I found this very interesting question and answer here, but unfortunately it does not work with Ember 1.0. It would be great if someone could edit it for ember 1.0. The JsFiddle is here.
I want to articulate my app around (a) first language choice, then (b) a page choice, so I have the following routes
App.Router.map(function () {
this.resource('lang', { path: '/:lang_id' }, function() {
this.resource('page', { path: '/:page_id' });
});
});
Implemented by
App.ApplicationRoute = Em.Route.extend({
model: function() {
return this.store.find('lang');
}
});
App.LangIndexRoute = Em.Route.extend({
model: function(params) {
return this.store.find('lang', params.lang_id);
}
});
App.PageRoute = Em.Route.extend({
model: function(params) {
return this.store.find('page', params.page_id);
}
});
model is :
App.Lang = DS.Model.extend({
name: DS.attr('string'),
pages: DS.hasMany('page')
});
App.Page = DS.Model.extend({
lang: DS.belongsTo('lang'),
name: DS.attr('string'),
title: DS.attr('string'),
extra_title: DS.attr('string'),
});
App.Lang.FIXTURES = [
{
id: 'en',
name: 'EN',
pages: [1, 2]
},
{
id: 'fr',
name: 'FR',
pages: [3]
},
];
App.Page.FIXTURES = [
{
id: 'page-item1',
name: 'ITEM1',
title: 'ITEM1',
extra_title: 'item1',
},
{
id: 'page-item2',
name: 'ITEM2',
title: 'ITEM2',
extra_title: 'item2',
},
{
id: 'page-item3',
name: 'ITEM3',
title: 'ITEM3',
extra_title: 'item3',
},
];
And the following markup :
<script type="text/x-handlebars" >
<nav>
<ul>
{{#each}}
<li>{{#linkTo 'lang' this currentWhen="lang" activeClass="selected" }}{{name}}{{/linkTo}}</li>
{{/each}}
</ul>
</nav>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="lang/index">
<nav>
<ul class="projects">
{{#each pages}}
<li>{{#link-to "page" activeClass="selected"}}{{name}}{{/link-to}}</li>
{{else}}
<li>Loading...</li>
{{/each}}
</ul>
</nav>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="page">
</script>
I cannot get the pages listed for the given language to be enumerated when loading the lang.index template.
How could I do that, or would there be a better way to manage language with ember ?
I think my mistake (or misunderstanding of the framework) is either in the model hook or in the iterator of #each...

Answer 1

I unblock the situation by modifying the route, model and template as below.
One of the problem was due to the need of declaring the hasmany relationship as async. (using FIXTURES), the other were related to the linkTo in the template.
However I still don't have exactly the behavior I want in the pages/index template. All pages are rendered, instead of only the one of the given language.
App.Router.map(function () {
this.resource('pages', { path: '/:lang_id' }, function() {
this.route('page', { path: '/:page_id' });
});
App.ApplicationRoute = Em.Route.extend({
model: function() {
return this.store.find('lang');
}
});
App.PagesIndexRoute = Em.Route.extend({
model: function(params) {
console.log(params.lang_id);
return this.store.find('page', params.lang_id);
}
});
App.Lang = DS.Model.extend({
name: DS.attr('string'),
pages: DS.hasMany('page',{async:true})
});
<script type="text/x-handlebars" >
<nav>
<ul>
{{#each}}
<li>{{#linkTo 'pages' this currentWhen="pages" activeClass="selected" }}{{name}}{{/linkTo}}</li>
{{/each}}
</ul>
</nav>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="lang/index">
<nav>
<ul class="projects">
{{#each pages}}
<li>{{#link-to "pages.page" this activeClass="selected"}}{{name}}{{/link-to}}</li>
{{else}}
<li>Loading...</li>
{{/each}}
</ul>
</nav>
{{outlet}}
</script>