0

我有一个应用程序，当遵循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>
4

2 回答 2

1

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

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

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

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

于 2014-02-10T17:04:05.270 回答
0

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);
    });
  }
});
于 2014-02-10T18:55:46.640 回答