如何将 Ember.js 中的对象控制器与仅返回所有对象的 API 一起使用？

Question

我有一个两页的 Ember.js 应用程序，它使用 ember-data 来包装一个简单的 RESTful API。主页是产品列表，另一个页面是一个产品的产品详细信息页面。数据通过只有“索引”请求的 API 加载，/api/products。

当通过主页导航网站时，上述内容可以正常工作，但是我不确定如何最好地处理直接导航到产品详细信息页面。我需要 ember-data 来请求所有产品并将这些产品保留在客户端，这样当用户浏览简单站点时，它就不会再向产品 API 发出任何请求。但是，我的应用程序中的 ProductIndexView 和 ProductIndexController 最好只看到一条记录。

在 Ember.js 中是否有处理此问题的好方法？我知道我可以将计算属性添加到过滤完整列表的控制器中，然后将其传递到视图模板中。但是，我宁愿视图和控制器不知道完整列表。

Answer 1

您需要将所有路由嵌套在可获取所有产品的资源中。

类似这样的：

App.Route.map(function() {
  this.resource('products', { path: '/' }, function() {
    this.route('index');
    this.resource('product', { path:'/:product_id'} );
  });
});

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

App.ProductsIndexRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor('products');
  };
});

使用products/index 模板显示所有产品。

使用product 模板显示产品详细信息。

请注意我包含在App.Product.find({}) 中的{}。这会强制 ember-data 返回一个承诺。这是使product 路由等待所有products 从服务器到达后才被调用的必要条件。