emberjs：哈希中的功能原型

Question

我有一个四个垂直面板UI：

• 第一个面板显示菜单，允许您选择要显示的数据
• 第二个面板使您可以从预定滤波器列表中选择一个过滤器
• 第三个面板使您可以查看过滤器的结果列表
• 第四面板让您显示特定项目的详细信息

对于此UI，我使用嵌套的路线和插座：

App.Router.map(function() {
    this.resource('customers', { 'path' : '/customers' }, function() {
        this.resource('customers_filters', { 'path' : '/:filter' }, function() {
            this.resource('customer', { 'path' : '/show/:customer_id' });
        });
    });
});

一切正常，但是当我显示特定项目的详细信息（我嵌套路线中的最后一个路线）时，URL中的哈希是不正确的。

• 第一条路线确定：＃/客户
• 第二个路线确定：＃/客户/全部
• 第三路线KO：＃/customer/function filter（）{[本机代码]}/show/2

我在Jsbin上举了一个例子： http://jsbin.com/inagavo/1

我究竟做错了什么 ？谢谢

Answer 1

问题在于，Ember根据每条路线的模型建立URL。当它试图建立在活动/所有路线下方的路线时，它使用您的项目数组（在其上没有字段称为滤波器），因此它不知道如何确定当前是否具有全/过滤器模型。一个好的做法是让您的slug（路径中的值：值）与模型上的属性匹配。

如果不匹配，则可以覆盖路线中的序列化方法，因此Ember知道如何序列化URL模型。

App.CustomersFiltersRoute = Ember.Route.extend({
  model: function(params) {

    if(params.filter == "active") {
      return _.where(App.Customers, {isActive: true});
    }

    return App.Customers;
  },

  serialize: function(model){
    if(model === App.Customers){
      return {filter:'all'}; 
    }
    return {filter:'active'};
  }
});

http://jsbin.com/inagavo/6/edit