ember.js - 在最新的 Ember 中，如何仅使用模型的 id/name 链接到路由，而不是在链接页面中提供其所有属性？

Question

我在从 Ember 1.0-pre2 转换到最新的 master ( 43354a98 ) 和新路由器时遇到了问题，即——

如果我有一条仅加载一堆记录的名称和 ID 的路线，并尝试将这些记录中的每一个链接到另一个应该显示完整模型的路线，当我到达新路线时，永远不会加载新模型, name 和 ID 是唯一可用的属性。

示例代码:

App.Router.map(function() {
  this.route("index");
  this.resource("birds");
  this.resource("bird", {
    path: "/birds/:bird_id"
  });
});

App.BirdsController = Ember.ArrayController.extend({
  birds: [
    {
      name: "Pigeon",
      id: "b.15"
    }, {
      name: "Chicken",
      id: "b.133"
    }, {
      name: "Turkey",
      id: "b.126"
    }, {
      name: "Ostrich",
      id: "b.4"
    }, {
      name: "Barn Owl",
      id: "b.47"
    }
  ]
});

App.BirdRoute = Ember.Route.extend({
  model: function(params) {
    return App.Bird.find(params.bird_id);
  }
});

{{#each bird in birds}}
  <li>{{#linkTo "bird" bird}}{{bird.name}}{{/linkTo}}</li>
{{/each}}

其中 App.Bird.find() 运行一些 XHR 以从一组远程 API(不使用 ember-data)构建 Ember.Object。为了简化问题，鸟类列表被硬编码到这个例子的 Controller 中；在我的真实应用程序中，列表来自远程 API。

我看到的行为是，如果您从/birds 开始并单击其中一个链接，路由器将转换为“bird”，然后您到达/#/birds/b.5，但 App.Bird.find() 是从来没有打电话，我在页面上唯一的数据是“姓名”和“身份证”。但是，如果您随后重新加载页面，它会调用 App.Bird.find() 并正确构建并显示模型。

是否有某种方法可以强制从 URL 中的 ID 进行反序列化，或者只是将 ID 传递给 linkTo 而不是它将假定为完整的对象？我有一个类似的实现可以在旧路由器上正常工作。

Answer 1

好像是 model Hook App.BirdRoute使用 {{#linkTo}} 导航时永远不会被调用...也许这是因为使用 {{#linkTo}}您正在将一个对象传递给来自 birds 的路线route 和 ember 认为您不需要调用 model因为它认为 id 已经被反序列化为一个对象。这似乎是有道理的，因为 model当你重新加载页面时被调用。

我用了setupController Hook 调用您的App.Bird.find()方法并将结果传递给 Controller ​​。这可以通过直接 URL 或通过 {{#linkTo}} 调用。点击。如果由 {{#linkTo}} 调用帮助链接setupController model参数将是 bird使用 {{#linkTo}} 传递的对象 helper 。如果直接从 URL 调用返回值来自 model钩子(Hook)将被传递到 setupController作为 model范围。

Here is a JSFiddle example

example with accessible URL

App.BirdRoute = Ember.Route.extend({
  model: function(params) {
    return {id: params.bird_id};
  },
  setupController: function(controller, model) {
    var bird_model = App.BirdTest.find(model.id);
    controller.set("content", bird_model);
  }
});