Ember.js 模型数据未加载到路线的直接加载上

我有一个应用程序，当遵循链接到时，一切都按预期工作，但当直接导航到子路由时，我的模型数据似乎不会加载。在我的子（类型）路由中，我在模型挂钩中使用了

this.modelFor

。这是一个直接导航到那里的箱子，它不显示颜色，但如果单击“辅助”，它会工作

以下是该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>

欢迎来到Ember.js
{{outlet}}
我想要一条到…/小学的路线，该路线的模型为红色、绿色和蓝色，到…/中学的路线的模型为黄色和橙色

{{{#每个分组}
{{{#链接到'types'组}{{group}（{{content.length}}）{{{/link到}
{{/每个}}

{{outlet}}
五颜六色
类型

{{{#控制器中的每个项目}
{{item.color}
{{/每个}}

问题是您在

应用程序中调用
modelFor
。TypesRoute

。当您“正常”进入页面时，您将进入

colors.index

路径，该路径将所有颜色加载到存储中。但是，当您直接输入

类型

或

类型.索引

时，

modelFor

将返回一个空数组，因为颜色尚未加载（如果不存在，则不会自动获取模型）

不幸的是，以下方法也不起作用；我怀疑是因为在获取数据时模型钩子没有停止

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

---

我自己使用余烬数据，所以不幸的是，我对余烬模型不够熟悉，无法提出解决方案

ebryn在IRC帮助我。这个问题与承诺有关。Ember模型使用

.fetch（）

返回承诺。根据这个承诺，我们可以调用

.then（）

并执行

解析。获取（'content'）

并进行筛选

这里可以看到一个工作示例-

更改仅限于

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

---

是的，我最初把它作为一个Ember数据解决方案，但我使用Mongo作为后端，需要能够嵌套嵌入对象，Ember模型似乎有很好的支持（我有嵌入的东西在工作）。如果你想要一个承诺，你应该使用

App.Color.fetch（）

而不是

find（）