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

以下のように、ルート、モデル、およびテンプレートを変更して、状況のブロックを解除します。問題の 1 つは、hasmany 関係を非同期として宣言する必要があるためです。(FIXTURES を使用)、もう 1 つはテンプレートの 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 に答える