ember.js - 如何在 ember.js 路由中显示模型的非 id 字段的字符串值？

Question

我有一个自定义字段，允许您过滤模型列表(例如在某些 ArrayController 上)

  PersonApp.SearchField = Ember.TextField.extend({
      keyUp: function(e) {
          var search = this.get('value');
          model = PersonApp.Page.create({term: search});
          this.get('controller.target').transitionTo('person.search', model);       
      }
  });

这是我用于分页和过滤/搜索的非常简单的模型

  PersonApp.Page = Ember.Object.extend({                                            
      term: ''
  });

我添加了一条适用于上面模型的简单路线

  PersonApp.Router.map(function(match) {
      this.resource("person", { path: "/" }, function() {
          this.route("page", { path: "/page/:page_id" });
          this.route("search", { path: "/search/:page_term" });                     
      });
  });

最后这是我的路线 setupController 方法

 PersonApp.PersonSearchRoute = Ember.Route.extend({
     setupController: function(controller, model) {
         this.controllerFor('person').set('filterBy', model.get('term'));
     }
 });

过滤器确实有效(这意味着它确实使用上面 setupController 中的 filterBy 修改了 ArrayController)。

但是在 URL 中我看到以下内容

http://www.google.com/#/search/<PersonApp.Page:ember517>

而不是

http://www.google.com/#/search/foo

我可以修改 model/route/setupController 以显示文本吗？

另外-这样的事情应该只是索引/主路线上的一个简单的“事件”，而不是像我上面那样的自定义路线吗？如果是这样，我仍然可以修改网址(我假设不能 - 所以这就是我现在将其作为路线的原因)

Answer 1

您需要在 PersonSearchRoute 中使用 serialize Hook 。根据serialize docs ，序列化是:

A hook you can implement to convert the route's model into parameters for the URL.

举个例子:

PersonApp.PersonSearchRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    this.controllerFor('person').set('filterBy', model.get('term'));
  },
  model: function(params) {
    return PersonApp.Page.create({term: params.page_term});
  },
  serialize: function(model) {
    return { page_term: model.term };
  }
});

JSBin example

这将显示正确的 URL:#/search/foo 但如果您直接导航到该 URL，或刷新该 URL 处的页面，您将需要使用模型 钩子(Hook)使用提供的动态参数查找并返回模型。从 model Hook 返回的值是直接导航到 URL 时传递到 setupController 的 model 参数，但如果 transitionTo 或 {{#linkTo}} 用于通过这些调用传递的对象直接传递到 setupController。