title: How to manage 2 nested dynamic segments with ember?
body: <p><strong>EDIT:</strong> I found this very interesting question and answer <a href="https://stackoverflow.com/questions/15833104/how-to-dynamic-update-2-templates-simultaneously-in-emberjs"><strong>here</strong></a>, 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 <a href="http://jsfiddle.net/qGCe6/4/" rel="nofollow noreferrer"><strong>here</strong></a>.</p>
  
  <p>I want to articulate my app around (a) first language choice, then (b) a page choice, so I have the following routes</p>
  
  <pre><code>App.Router.map(function () {
      this.resource('lang', { path: '/:lang_id' }, function() {
        this.resource('page', { path: '/:page_id' });
      });
  });
  </code></pre>
  
  <p>Implemented by</p>
  
  <pre><code>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);
    }
  });
  </code></pre>
  
  <p>model is :</p>
  
  <pre><code>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',
   },
  ];
  </code></pre>
  
  <p>And the following markup :</p>
  
  <pre><code>&lt;script type="text/x-handlebars" &gt;
   &lt;nav&gt;
    &lt;ul&gt;
    {{#each}}
     &lt;li&gt;{{#linkTo 'lang' this currentWhen="lang" activeClass="selected" }}{{name}}{{/linkTo}}&lt;/li&gt;
     {{/each}}
    &lt;/ul&gt;
   &lt;/nav&gt;
  {{outlet}}
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="lang/index"&gt;
   &lt;nav&gt;
    &lt;ul class="projects"&gt;
    {{#each pages}}
     &lt;li&gt;{{#link-to "page"  activeClass="selected"}}{{name}}{{/link-to}}&lt;/li&gt;
    {{else}}
     &lt;li&gt;Loading...&lt;/li&gt;
    {{/each}}
    &lt;/ul&gt;
   &lt;/nav&gt;
  {{outlet}}
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="page"&gt;
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I cannot get the pages listed for the given language to be enumerated when loading the lang.index template.</p>
  
  <p>How could I do that, or would there be a better way to manage language with ember ?</p>
  
  <p>I think my mistake (or misunderstanding of the framework) is either in the model hook or in the iterator of #each...</p>