Emberjs: prototipo de funciones en el hash

Question

Tengo cuatro paneles verticales UI:

• El primer panel muestra el menú y le permite elegir los datos que desea mostrar
• El segundo panel le permite seleccionar un filtro de una lista de filtros predefinidos
• El tercer panel le permite ver la lista de resultados del filtro
• El panel de la luz le permite mostrar los detalles de un elemento específico

Para esta interfaz de usuario, uso rutas y puntos de venta anidados:

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

Todo funciona bien, pero cuando muestro los detalles de un elemento específico (la última ruta en mis rutas anidadas), el hash en URL no es correcto.

• Primera ruta OK: #/clientes
• Segunda ruta OK: #/clientes/todo
• Tercera ruta KO: #/clientes/function filtre () {[código nativo]}/show/2

Puse un ejemplo en jsbin: http://jsbin.com/inagavo/1

Qué estoy haciendo mal ? Gracias

Answer 1

El problema es que Ember desarrolla la URL en función de los modelos para cada ruta. Cuando intenta construir la ruta debajo de la ruta activa/todas, utiliza su matriz de elementos (que no tiene un campo llamado filtro), por lo que no sabe cómo determinar si actualmente tiene todo/filtro modelo. Una buena práctica es que su babosa (el valor en la ruta) coincida con la propiedad en el modelo.

Si no coincide, puede anular el método de serializar en la ruta, por lo que Ember sabe cómo serializar su modelo para la 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