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中的哈希值不正确。

第一条路线OK：＃/ customers
第二条路线OK：＃/ customers / all
第三条路线KO：＃/ customers / function filter（）{[native code]} / show / 2

我在JsBin上做了一个例子：http://jsbin.com/iNAGaVo/1

我做错了什么？谢谢

Answer 1

问题是，ember会根据每条路线的模型建立网址。当它试图在active / all路径下面建立路由时，它会使用你的项目数组（它上面没有一个名为filter的字段），所以它不知道如何确定它当前是否有all / filter模型。一个好的做法是让你的slug（路径中的：value）与模型上的属性匹配。

如果它不匹配，你可以覆盖路线中的序列化方法，因此ember知道如何为你的网址序列化你的模型。

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

Emberjs：哈希函数原型

1 个答案: