How to create two filters for the same route?

Ember Data
1

I’m trying to create two different filters on the IndexRoute (one for active projects, another for archived projects). I’m able to pull the active projects using the following code:

// ROUTE
App.ProjectsRoute = Ember.Route.extend({
  model: function () {
    return this.get('store').find('project').then(function (records) {
      return records.filter(function (project) {
        return !project.get('isArchived');
      });
    });
  }
});

// VIEW
{{#each project in model}}
  <li>
    {{#link-to 'project' project}}
      {{project.name}}
    {{/link-to}}
  </li>
{{/each}}

What’s the protocol to create a second filter for the archived projects and display them on the same page?

2

Why not add computed properties to the controller instead?

3

So you can do it multiple ways. One is to have a argument in your route, such as …/index?projectStatus=active or …/index?projectStatus=archived. Your Route could do something like:

model: function(params) {
  return this.store.find('project', { status: params.projectStatus });
}

This way your api can only send relevant data instead of filtering the data locally. In my opinion, this option is the most elegant unless you’re dealing with very small datasets and you want to avoid multiple http trips.

Another option is to retrieve all the data or data based on same other filter and use a computed property locally.

1 Like
4

Thanks! I’ll look into both of these options. Was really wanting to know some good practices and this points me in the right direction.

5

Or if you want to combine both server and client side filtering, do something like this:

App.PostsFavoritedRoute = Ember.Route.extend({
  model: function() {
    var store = this.store;  
    return store.filter('project', { archived: true }, function(post) {
      return post.get('isArchived');
    });
  }
});

Altered from http://emberjs.com/guides/models/frequently-asked-questions/