0

我有四个垂直面板 UI：

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

对于这个 UI，我使用嵌套的 Routes 和 Outlets ：

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

我究竟做错了什么 ？谢谢

4

1 回答 1

1

问题是 ember 会根据每个路由的模型构建 url。当它尝试在 active/all 路由下构建路由时，它使用您的项目数组（其中没有称为 filter 的字段），因此它不知道如何确定它当前是否具有 all/filter模型。一个好的做法是让你的 slug（路径中的 :value）与模型上的属性匹配。

如果不匹配，您可以覆盖路由中的序列化方法，因此 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

于 2013-11-07T19:40:57.070 回答