Emberjs : function prototype in hash

Question

I have a four vertical panels UI :

• The first panel shows the menu and allows you to choose the data you want to display
• The second panel lets you select a filter from a list of pre-defined filters
• The third panel lets you see results list of the filter
• The forth panel let you display the details of a specific item

For this UI, I use Nested Routes and 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' });
        });
    });
});

Everything work fine but when I show the details of a specific item (the last route in my nested routes) the hash in URL is not correct.

• First route OK : #/customers
• Second route OK : #/customers/all
• Third route KO : #/customers/function filter() { [native code] }/show/2

I put an example on JsBin : http://jsbin.com/iNAGaVo/1

What am I doing wrong ? Thank you

Answer 1

The problem is that ember builds up the url based on the models for each route. When it tries to build up the route below the active/all route it uses your array of items (which doesn't have a field on it called filter) so it doesn't know how to determine if it's currently has the all/filter model. A good practice is to have your slug (the :value in the path) match the property on the model.

If it doesn't match you can override the serialize method in the route, so ember knows how to serialize your model for the 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