Best approach for routing to resources and filtering by multiple attributes

1

My sense if that this question isn’t objectively answerable and therefore not a good fit for Stack Overflow and probably too long-winded for IRC. That said, if either of those two channels are more appropriate for this question, then I’ll happily take my question there.

I’m in the process of building my first Ember app. I have about 2,300 lessons in a CouchDB database and I want to create an index that allows users to filter the list by different attributes, but I also want to keep in the Ember fashion and have the route reflect the current state of the app. If you’ve currently filtered down to economics lessons for grades six through eight in print, I’d for the URL to reflect that and for you to be able to share or bookmark that link.

There are five major criteria that I want to let users filter by: subject, standard, grade, format, and type and any combination thereof (except for subject and standards, which are joined at the hip). I tried to create a route for every permutation, but that untenable real fast.

To my knowledge, query parameters are still only in the Canary build, which I think might be a little ambitious for my first foray into Ember.

I’m starting to think I might be approaching this the wrong way. Any advice?

2

Before Query Params is released, one little gem with the Ember router is the serialize hook which gives you full control over how properties are stored into the URL…you don’t have to use the ID property of your model. You’d just want to put some sort of string that describes the state of the current route.

As an example, I have a few applications that refresh data on a daily basis. I want the URL to display “today” if they’re looking at today’s data and a date at all other times. That way, if they bookmarked the route, when they came back to it the following day, they would be looking at the most recent data. Here’s how it looks (note: I’m also using Moment.js):

App.Router.map(function() {
  this.route("DataForDay", { path : "/:date" });
});

App.DataForDayRoute = Ember.Route.extend({
  model : function(params) {
    var dateString = params.date;
    if( dateString === 'today' ) dateString = moment().format('YYYY-MM-DD');
    return this.store.find('DataDay', { date : dateString });
  },

  serialize : function( model ) {
    var query = model.get('query'), result = {};
    var dateString = query.date;

    if( dateString === moment().format('YYYY-MM-DD') ) {
      result.date = 'today';
    } else {
      result.date = dateString;
    }
    return result;
});

As long as you can serialize and deserialize the string into the query that you want to use for your model, then you don’t even need the coming Query Params.

Hope this helps!

1 Like