Question

I have an controller which is an ArrayProxy and contains some computed arrays.

In coffeescript, my controller looks like so:

MyApp.parentController = Ember.ArrayProxy.create
  content: []
  mothers: (->
    mothers = (person for person in @get("content") when person.sex == 0)
  ).property("content")
  fathers: (->
    fathers = (person for person in @get("content") when person.sex == 1)
  ).property("content")

This works fine, and when I request ‘MyApp.parentController.get(“mothers”)’ from the command line I get back the expected array.

Now I want to display that set in my document, and so I want to iterate over the list of mothers:

<div id="parent-mothers-pool">
  {{#each MyApp.parentController.mothers}}
     {{#view MyApp.ParentView contentBinding="this"}}{{/view}}
  {{/each}}
</div>

This does not work, and in fact completely hangs the applications, forever spinning and without even printing any errors to the console.

Leaving “.mother” off of the #each handlebar correctly displays all the parents, as you would expect. But putting it on borks it.

How do I iterate over this computed array?

Answer 1

You should define a binding in the ParentMothersPool view, pointing to controller’s mothers attribute:

MyApp.EnclosingView = Ember.View.extend
    mothersBinding: 'MyApp.parentController.mothers'

Then in the template:

{{#each mothers}}
    ...