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

Thanks for your reply, I put the wrong jsbin. I update now with a new one more clean. Everything work, it's just the URL that look strange when you display details. — Mehdi, Nov 07 '13 at 17:50

score 1 · Accepted Answer · answered Nov 07 '13 at 19:40

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

Thanks you kingpin2k :) I found the solution by myself at the same time ;) I solved it with the same method but with a small difference :http://jsbin.com/iNAGaVo/7/ Btw your explaination is very clear and I aggre with you ; the best solution is to use model. I keep in mind for the next step : plug a backend ;) — Mehdi, Nov 07 '13 at 20:59

Emberjs : function prototype in hash

1 Answers1