如何显示ember.js路由中模型的非id字段的字符串值？ [英] How to show the string value of a non id field for a model in an ember.js route?

问题描述

我有一个自定义字段，允许您过滤掉一个模型列表（在某些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（） b $ b 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） / p>

但是在URL中，我看到以下

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

而不是

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

任何方式我可以修改model / route / setupController来显示文本？

同样 - 应该像这样的东西只是索引/主路由上的一个简单的事件而不是像上面那样的自定义路线？如果是这样，我还可以修改url（我假设不是 - 这就是为什么我现在有一条路线）

解决方案

您需要使用 PersonSearchRoute 中的 serialize 钩子。根据 序列化 docs ， serialize 是：

可以实现一个钩子来转换路线的模型转换为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示例

这将显示正确的URL：＃/ search / foo 但是如果您直接导航到该URL，或者刷新该URL的页面，则需要使用模型 hook来使用提供的动态参数来查找和返回模型。从模型钩子返回的值是模型参数传递到 setupController 直接导航到一个URL，但是如果使用 transitionTo 或 {{＃linkTo}} 通过这些调用传递的对象直接传递给 setupController 。

I have a custom field that allows you to filter down a list of models (on some ArrayController lets say)

  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);       
      }
  });

Here is the very simple model I'm using for both pagination and filtering/search

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

I added a simple route that works with the model above

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

And finally here is my route setupController method

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

The filter does work (meaning it does modify the ArrayController using the filterBy in my setupController above).

But in the URL I see the following

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

Instead of

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

Any way I can modify the model/route/setupController to show the text instead?

Also- should something like this just be a simple "event" on the index / main route instead of a custom route as I have it above? If so can I still modify the url (I assume not -so that's why I have it as a route for now)

解决方案

You need to use the serialize hook in the PersonSearchRoute. According to the serialize docs, serialize is:

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

For your example:

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

This will show the correct URL: #/search/foo but if you navigate to that URL directly, or refresh the page at that URL you will need to use the model hook to find and return a model using the provided dynamic parameter. The value returned from the model hook is the model parameter passed into setupController when navigating directly to a URL, but if a transitionTo or a {{#linkTo}} is used the object passed with those calls is passed directly to setupController.

这篇关于如何显示ember.js路由中模型的非id字段的字符串值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！