Ember-Data: Adding Server Queries to AJAX Requests

Question

I am having trouble with a specific case using Ember-Data.

Typically Ember expects a model class, the route, the ajax request, and the returned JSON, to all follow a similar pattern.

The RESTAdapter tries to automatically build a URL to send to the server, which is ok for some situations, but I need full control over some of my request URLs particularly when it comes to appending additional parameters, or matching an API to a route that has a completely different URL structure.

Ember sadly, has no guides for this, though I did find something about the buildURL method

I am not comfortable enough rooting through the source code to find out what happens under the hood though I do not want to break ember data just to fix a few use cases.

• I have set my RESTAdapter's namespace to api/rest
• The model and resource I want to populate is view-debtors
• The specific service I want to reach is at debtor/list
• I also need to pass extra parameters for pagination ?page_size=10&page_number=1, for example.

I am completely lost how to do this. I cannot change the API structure... there are too many services depending on them.

---

Some Small Progress

I went ahead and used my current knowledge to get a little closer to the solution.

• I created a model and called it "list"
• I extended RESTAdapter for "list" to change the namespace to "api/rest/debtor"
• I changed the model hook for "view-debtors" route to store.find('list')

The result now is that the AJAX call is almost correct... I just need to add those extra parameters to the server queries.

This is where I stand now... can I add those server queries via the model hook? or better yet can I also control server queries via ember actions to get new AJAX requests?

Stepping back a bit. Is my method so far a good practice? Because I am using a route's model hook, to set the model to list, will this only work if the routes URL is typed in directly?

So many questions :p

Answer 1

You can find by query which will append a query string onto the end of your request using the object provided.

// this would produce /api/rest/debtor/lists?page_size=1&page_number=10
this.store.find('list', {page_size:1, page_number:10});

Personally I think it's a bit hacky to go fudging the model names and namespace to make it supposedly fit your backend's url structure. It really depends on what you're attempting to do. If you want all the full features of CRUD using Ember-Data for this particular list of data, you're going to be hacking the end-point left and right. Whether or not Ember Data really helps you is questionable. If you are just reading data, I'd totally just fetch the data using jquery and sideload it into Ember Data.

var store = this.store;
$.getJSON('/api/rest/debtor/lists?page_size=1&page_number=10').then(function(json){
  //fix payload up if necessary http://emberjs.com/api/data/classes/DS.Store.html#method_pushPayload
  store.pushPayload('type', json);
}).then(function(){
  return store.all('type'); // or store.filter('type') if you want to filter what is returned to the model hook
});

pushPayload docs