0

すべてが期待どおりに機能するアプリケーションがありますがlink-to、子ルートに直接移動すると、モデル データが読み込まれないようです。私の子（タイプ）ルートthis.modelForでは、モデルフックで使用しています。これはビンですhttp://emberjs.jsbin.com/oSApiSeh/7#/types/secondaryそこを直接ナビゲートしても色は表示されませんが、セカンダリをクリックすると機能します。

そのjsbinのソースは次のとおりです。

// ... groupBy definition omitted
App = Ember.Application.create();

App.Router.map(function() {
  this.resource('colors', { path: '/' }, function() {
    this.resource('types', { path: 'types/:type_group' }, function() {});
  });
});

App.ColorsRoute = Ember.Route.extend({
  model: function() {
    return App.Color.find();
  }
});

App.TypesRoute = Ember.Route.extend({
  model: function(params) {
    return this.modelFor('colors').filterBy('type', params.type_group);
  }
});

App.ColorsController = Ember.ArrayController.extend({
  grouped: _groupBy('type')
});

App.TypesController = Ember.ArrayController.extend({});

App.Color = Ember.Model.extend({
  'color':Ember.attr('string'),
  'type': Ember.attr('string')
});
App.Color.adapter = Ember.FixtureAdapter.create();
App.Color.FIXTURES = [
  { color:'red', type: 'primary'},
  { color:'green', type: 'primary'},
  { color: 'yellow', type: 'secondary'},
  { color: 'orange', type: 'secondary'},
  { color: 'blue', type: 'primary'}
];

私のテンプレート:

  <script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2>

    {{outlet}}

    I am wanting a route to .../primary that has red, green, and blue as its model and a route to .../secondary that has yellow and orange in its model
  </script>

  <script type="text/x-handlebars" data-template-name="colors">
    <ul>
    {{#each grouped}}
      <li>{{#link-to 'types' group}}{{group}} ({{content.length}}){{/link-to}}</li>
    {{/each}}
    </ul>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="colors/index">
    all colors
  </script>

  <script type="text/x-handlebars" data-template-name="types">
    Types
    <ul>
    {{#each item in controller}}
      <li>{{item.color}} </li>
    {{/each}}
    </ul>
  </script>
4

2 に答える 2

0

ebryn は IRC で私を助けてくれました。問題は約束に関連していました/関連しています。Ember-Model は.fetch()promise を返すために使用します。その約束から、呼び出し.then()て、実行してresolved.get('content')、フィルタリングすることができます。

実際の例はここで見ることができます - http://emberjs.jsbin.com/cawaq/3/edit

変更はTypesRoute、次のとおりです。

App.TypesRoute = Ember.Route.extend({
  model: function(params) {
    return App.Color.fetch().then(function (items) {
      return items.get('content').filterBy('type', params.type_group);
    });
  }
});
于 2014-02-10T18:55:46.640 に答える