EmberJS: How to Handle Route with Dynamic Segment Returning an Array?

Question

EDIT:

I've gotten around this by upgrading to EmberJS RC4. This version doesn't automatically call the model hook on routes, which allows the following:

App.LiftsRoute = Ember.Route.extend({               
  setupController: function(controller, model) {          
    controller.set('content', App.Lift.find({
      county: model.county || model.id
    }));
  }
});

EDIT END

I'm attempting to add a route with a dynamic segment in EmberJS & Ember Data w/ RESTful Adapter which returns an array but I failing.

App.Router.map(function() {  
   this.route('lifts', { path: '/lifts/:county' });
});

App.LiftsRoute = Ember.Route.extend({           
  model: function(params) {                   
    return App.Lift.find(params.county);
  }
});

App.Lift = DS.Model.extend({
  name: DS.attr('string'),
  date: DS.attr('number'),
  description: DS.attr('string'),
  destination: DS.attr('string')
});

This is returning the following error:

Uncaught Error: assertion failed: Your server returned a hash with the key lifts but you have no mapping for it.

From JSON in the form {lifts: [{id: 1, name: "xyz", ...}, {id: 2, name: "abc", ...]}

Any ideas?

Sherwin Yu Sherwin Yu · Accepted Answer · 2013-05-28T04:12:14

EDIT: Setting up a route with a single dynamic segment to return an array of objects

You can still keep the same route structure:

this.route('lifts', { path: '/lifts/:county_ids' });

And then override the model hook to parse params.county_ids into a query string:

model: function(params) {
  ids  = parseQueryIds(params.county_ids) // you have to parse this in a format that your server will accept
  App.Lift.find({query: ids}) // returns an record array
}

This will preserve the url structure (if you go to /lifts/1,2,3, that url will be saved) but also returns an array of items.

END EDIT

This is happening because App.Lift.find, when passed a string, will try to query by id for a single object, but your response from the server is returning multiple objects (id 1, id 2, etc).

When you do App.Lift.find(params.county) (let's say params.county is "1"), Ember will make a GET '/lifts/1'. But for whatever reason, your server is returning JSON with a key that has an array.

Can you check that

the GET request ember is making is indeed for a single id? If you're using chrome, check the network requests -- what is the resource that App.Lift.find(params.county) asks for?
that params.county is defined? If it's undefined, you'll be calling App.Lift.find(undefined), which makes the GET to /lifts, and that might cause your server to return the array of objects.
that your server is responding to requests properly when a single id is requested?

EmberJS: How to Handle Route with Dynamic Segment Returning an Array?

2 Answers