Emberjs: прототип функции в хэш

Question

У меня есть четыре вертикальные панели интерфейса:

• Первая панель показывает меню и позволяет выбрать данные, которые вы хотите отобразить
• Вторая панель позволяет выбрать фильтр из списка предопределенных фильтров
• Третья панель позволяет увидеть список результатов фильтра
• панели вперед позволяет отображать детали конкретного элемента

Для этого интерфейса, я использую Вложенные маршруты и 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: #/клиенты
• Второй маршрут OK: #/клиенты/все
• Третий маршрут KO: #/клиенты/фильтрующая функция() {[машинный код]}/шоу/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