Ember afterRender component / non-async AJAX - ajax

Question

Imagine a component that renders an HTML table. The data from the table comes from remote JSON.
Another part of the component relies on the HTML table being fully rendered (with the JSON data).
On the component's init event, I retrieve the JSON and set the data that the component will use to render the table.
I can't use an afterRender hook to further process the table, because when the afterRender is fired, the table exists but without the JSON data.
I noticed that an afterRender hook outside the component works (the table is fully rendered), but then I'd break the encapsulation by running code that belongs inside the component.
I could maybe get the JSON synchronously, or perhaps a promise within a promise? How would I do the latter? What I mean is on the component's init hook, how do I create a promise which returns only when the promise inside it is returned?
Or how can I approach this the Ember way?

Answer 1

You can definitely chain the hell out of your promises.
var items = [];
this.set('items', items);
$.getJSON('/colors').then(function(results){
results.forEach(function(item){
item.color +=" is pretty";
});
return results;
}).then(function(prettyResults){
prettyResults.forEach(function(item){
items.pushObject(item);
});
});
http://emberjs.jsbin.com/OxIDiVU/724/edit
Super deep convoluted promises
new Ember.RSVP.Promise(function(resolve){
resolve($.getJSON('/colors'));
}).then(function(results){ // this isn't hit til the json is returned
results.forEach(function(item){
item.color +=" is pretty";
});
return new Ember.RSVP.Promise(function(resolve){
Ember.run.later(function(){
resolve(results);
}, 4000);
});
}).then(function(prettyResults){ // this isn't hit til the 4 second resolve is done
prettyResults.forEach(function(item){
items.pushObject(item);
});
});
http://emberjs.jsbin.com/OxIDiVU/725/edit