Question

编辑：我发现这个非常有趣的问题和回答here，但不幸的是它不适用于Ember 1.0。如果有人可以为ember 1.0编辑它会很棒。 JsFiddle是here。

我想明确表达我的应用程序（a）第一语言选择，然后（b）页面选择，所以我有以下路线

App.Router.map(function () {
    this.resource('lang', { path: '/:lang_id' }, function() {
      this.resource('page', { path: '/:page_id' });
    });
});

由

实施

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);
  }
});

模型是：

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',
 },
];

以下标记：

<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>

加载lang.index模板时，我无法获取列出给定语言的页面。

我怎么能这样做，或者用ember管理语言会有更好的方法吗？

我认为我的错误（或对框架的误解）要么在模型钩子中，要么在#each的迭代器中...

Answer 1

我通过修改路线，模型和模板来解除阻碍，如下所示。其中一个问题是由于需要将asmany关系声明为async。（使用FIXTURES），另一个与模板中的linkTo相关。但是我仍然没有在页面/索引模板中完全具有我想要的行为。所有页面都被渲染，而不仅仅是给定语言之一。

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>

如何使用ember管理2个嵌套动态段？

1 个答案: