0

编辑：我在这里找到了这个非常有趣的问题和答案，但不幸的是它不适用于 Ember 1.0。如果有人可以为 ember 1.0 编辑它，那就太好了。JsFiddle 在这里。

我想围绕（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 的迭代器中......

4

1 回答 1

0

我通过如下修改路线、模型和模板来解除阻塞。问题之一是由于需要将 hasmany 关系声明为异步。（使用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>
于 2013-10-06T01:22:10.180 回答