Question

我有一个应用程序，当跟随link-to时，一切都按预期工作，但直接导航到子路径时，我的模型数据似乎没有加载。在我的孩子（类型）路线中，我在模型钩子中使用this.modelFor。这是一个直接在那里导航的bin 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>

Answer 1

问题是您在modelFor中致电App.TypesRoute。当您正常进入页面时，您最终会进入colors.index路线，该路线会将所有颜色加载到商店中。但是，当您直接输入types或types.index时，modelFor将返回一个空数组，因为尚未加载颜色（如果不存在则不会自动获取模型）。

不幸的是，以下情况也不起作用;我怀疑因为在获取数据时模型挂钩没有停止。

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

我自己使用Ember Data，所以很遗憾我对Ember Model不太熟悉，无法提出解决方案。

Answer 2

ebryn在IRC帮助了我。这个问题与/是有关的。 Ember-Model使用.fetch()来返回承诺。根据该承诺，我们可以致电.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);
    });
  }
});

模型数据未在路径的直接负载上加载

2 个答案: