Using promises in a route's model


All, I’m trying to figure out how I can use dynamic data from a promise in a model then return it to a template using handlebars.

Right now I’ve got this

myroute,js export default Ember.Route.extend({ model() { return new Ember.RSVP.Promise(function(resolver) { let myData = new Array(); console.log(DynamicItems.compute().then(function(resolver){ /*DynamicItems is a helper I've imported*/ myData = resolver; })); } });

my-component.hbs <ul> {{#each people as |elem|}} <li>{{elem}}</li> {{/each}} </ul>

mytemplate.hbs {{my-component people=model}}

What is being returned the the promise object, not the data. What’s the most straight forward way to solve this?



You are using Ember.RSVP.Promise wrong. This is what it should look like:

export default Ember.Route.extend({
  model() {
    return new Ember.RSVP.Promise(function(resolve, reject) {
      DynamicItems.compute().then(function(myData) {
      }, reject);

Or, if DynamicItems.compute() returns a promise that resolves with the value you want in your template (as the above example does), you can drop the RSVP.Promise wrapper:

model() {
  return DynamicItems.compute();