Getting data from DS.PromiseArray in EmberJS

Asked By: Anonymous

I’m new to emberJS and I’m having some trouble working with promises.

Here is my router:

  this.resource('menus', function(){
    this.resource('menu', {path: '/:menu_id'}, function(){
      this.resource('submodule', {path: '/:submodule_id'});
    });
  });
});

I have nested routes, and the child route returns a menuss object based on a given id.
Here is my MenuRoute:

App.MenuRoute = Ember.Route.extend({
  model: function(params){
    return this.store.find('menuss', params.menu_id);
  }    
});

Here are my models:

App.Menuss = DS.Model.extend({
  name: DS.attr('string'),
  subModule: DS.hasMany('submodule', {async:true})
});

App.Submodule = DS.Model.extend({
  name: DS.attr('string'),
  content: DS.attr('string')
});

The ‘subModule’ attribute of Menuss model contains an array of Submodule model id’s.
Inside my menu template, I’m receiving a menuss object and I want to display the SubModules each menu item has.

However, when I call {{this.subModule}}, it returns <DS.PromiseArray:ember488>. How can I get the contents from this subModule array?

I looked at some similar questions where they say use the then() method, but I can’t seem to figure it out here.

Solution

Answered By: Anonymous

In the template you’ll want to iterate the property since it’s an array, ember/handlebars will deal with the synchronicity of the PromiseArray.

{{#each item in subModule}}
  {{item.name}}
{{/each}}