Ember.js: più chiamate Ajax in una singola route

Question

Sto cercando di ottenere due ottenere 2 elenchi di post di blog da 2 categorie (notizie ed eventi), quindi visualizzarli in 2 diverse colonne della mia home page. È necessario che io esegua 2 chiamate Ajax separate per ottenere quei post del blog. Non uso ember-data per questa operazione, in quanto non vedo il vantaggio di usarla in questo scenario (ma potrei sbagliarmi).

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); 
    }); 
    } 
}); 

Il codice sopra funziona. Ma da quello che ho letto nella documentazione di Ember, dovrei ottenere quei dati nel gancio model (anziché setupController) per sfruttare le promesse. Così ho provato a riscrivere il mio codice in questo modo:

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; 
     }) 
     } 
    }; 
    } 
}); 

Ma questo non funziona. Le chiamate Ajax sono fatte ma troppo tardi, dopo che la pagina è stata resa. Non sono sicuro di quello che sto facendo male. Ci sarebbe qualche vantaggio nell'utilizzare i dati ember per quello scenario?

Answer 1

È possibile restituire un hash di promesse con RSVP.hash()

Si potrebbe fare questo:

export default Ember.Route.extend({ 
    model() { 
     var wpUrl = 'http://public-api.wordpress.com/rest/v1/sites/company.wordpress.com/posts/?number=2&category='; 

     return new Ember.RSVP.hash({ 
      news: Ember.$.ajax({ url: wpUrl + 'news', dataType: "jsonp", type: 'GET' }), 
      events: Ember.$.ajax({ url: wpUrl + 'events', dataType: "jsonp", type: 'GET' }) 
     }); 
    } 
}); 

Leggi di più riguardo le promesse in Ember here

Answer 2

Si restituisce un oggetto contenente due promesse, piuttosto che una promessa reale. Ciò di cui hai bisogno è costruire la tua promessa (Ember.RSVP.Promise) che sarà risolta una volta che entrambe le promesse interiori si risolveranno.