Using promises in a route's model


#1

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?

tyia


#2

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) {
        resolve(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();
}