StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow can I have multiple ajax calls in one route?
text
Body
copied!<p>I'm trying to get two get 2 lists of blog posts from 2 categories (news and events), then display them in 2 different columns of my home page. It is required for me to perform 2 separate Ajax calls to get those blog posts. I do not use ember-data for this operation, as I don't see the advantage of using it in this scenario (but I may be wrong).</p> <pre><code>export default Ember.Route.extend({ setupController(controller, model) { var wpUrl = 'http://public-api.wordpress.com/rest/v1/sites/company.wordpress.com/posts/?number=2&category='; Ember.$.ajax({ url: wpUrl + 'news', dataType: "jsonp", type: 'GET' }).then(function (data) { controller.set('news', data.posts); }); Ember.$.ajax({ url: wpUrl + 'events', dataType: "jsonp", type: 'GET' }).then(function (data) { controller.set('events', data.posts); }); } }); </code></pre> <p>The above code works. But from what I read in the Ember documetation, I should be getting those data in the <code>model</code> hook (instead of <code>setupController</code>) to take advantage of promises. So I tried to re-write my code this way:</p> <pre><code>export default Ember.Route.extend({ model() { var wpUrl = 'http://public-api.wordpress.com/rest/v1/sites/company.wordpress.com/posts/?number=2&category='; return { news: function () { return Ember.$.ajax({ url: wpUrl + 'news', dataType: "jsonp", type: 'GET' }).then(function (data) { return data.posts; }) }, events: function () { return Ember.$.ajax({ url: wpUrl + 'events', dataType: "jsonp", type: 'GET' }).then(function (data) { return data.posts; }) } }; } }); </code></pre> <p>But this does not work. The Ajax calls are done but too late, after the page has rendered. I'm not sure here what I'm doing wrong. Would there be any advantage of using ember-data for that scenario?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload