Looping over an Ember.js promise

Question

I am trying to loop over what I believe to be an Ember promise, but all I can seem to get returned is an object, when it should be an array.

jsbin: http://emberjs.jsbin.com/qakine/1/edit

If I just loop over the items in the template then I have no issues, but I want to be able to interact with the array items in my controller. Any help appreciated.

Answer 1

Quite a few things here, let me see if I can remember them all:

When you have a route under a resource, the routes and controllers of that route should take their parent's name.

App.Router.map(function() {
  this.resource("parent", function(){
    this.route("child");
  });
});

App.ParentChildRoute...

App.ParentChildController...

Handlebars can't access normal functions from your controller, this should be converted into a computed property.

App.ParentChildController = Ember.ObjectController.extend({
  middleNames: function(){
    ...
  }.property('middles.[]')
});

naming is case sensitive

{{#each name in middlenames}}

should be

{{#each name in middleNames}}

Example: http://emberjs.jsbin.com/cowibi/1/edit

Answer 2

I created an new example based on yours to make things clear. You can check it out here:

http://emberjs.jsbin.com/hokabe/4/edit

For Ember route's model hook, if the return value is a promise, the route will wait for the promise resolved and pass the resolved value to controller's model property.

And a App.Parent instance's middles property returns a promise (actually it's a DS.PromiseArray instance) which will resolve a middles array (actually it's a DS.ManyArray instance).

so for getting children you can simply do this:

App.ParentMiddlesRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor('parent').get('middles');
  }
});

Note that modelFor argument is a route name but not a model name. It means "Get the model from given route".