Ember.js Route Mappings

Question

I am very new to ember.js and I am try to setup the routes/resources for my application in App.Router.map, however I am having a bit of trouble with coming up with the most efficient/DRY-est way to define the routes that the app needs.

I want to have a resource items, which is to be the default route when coming into the application, it displays a list of items which is filtered by a dynamic segment :bucket, that must be one of set of predefined bucket names. i.e. #/items/foo, or #/items/bar, where foo and bar are valid :bucket values.

Additionally, the items route should also allow a second segment called tag, which then must be followed by another dynamic segment which is a url-safe version of the tag name, i.e. #/items/tag/my-tag.

I have the first part working, using:

App.Router.map(function() {
   this.resource('items', {path: '/items/:bucket'}); 
});

However, i am unable to figure out how to fit the tag version of the route in there. I've tried both nesting it inside the items resource and also as its own top level resource, but neither works.

Answer 1

You can structure your router like this:

App.Router.map(function() {
  this.resource('items', {path: '/items'}, function(){
    this.route('bucket', {path: '/:bucket'});
    this.route('tag', {path: '/tag/:tag'});
  });
});

This shows all Items at #/items and filters by bucket at #/items/bucketNameHere and by tags at #/items/tag/tagNameHere.

If all items are displayed in the ItemRoute:

App.ItemsRoute = Ember.Route.extend({
  model: function(){
      return this.store.find('item');
  }
});

Then you can handle the filtering in the ItemsBucketRoute and ItemsTagRoute:

App.ItemsBucketRoute = Ember.Route.extend({
  model: function(params){
    console.log("model fired");
    return this.modelFor('items').filterProperty('bucket', params.bucket);
  }
});

App.ItemsTagRoute = Ember.Route.extend({
  model: function(params){
    return this.modelFor('items').filterProperty('tag', params.tag);
  }
});

You can also accomplish list filtering using the filterProperty of arrayControllers.

JSBin Example