In Ember.js, why does array binding not work outside of {{#each}}?

Question

In the code below, I visualize 3 views. The second and third views display App.controller.a . Clicking on the first view changes App.controller.a . When you click, the third view updates its contents. The second view does not update its contents. Why?

I assumed that the second view binds to the array App.controller.a . It seems that the binding is not updating.

Demo: http://jsfiddle.net/kcmH4/

The code:

 App = Ember.Application.create({}); App.controller = Ember.Object.create({ a: Ember.A([1]), my_method: function() { var a = this.get('a'); $.each([2], function(i, element) { a.pushObject(element); }); } }); App.MyView = Ember.View.extend({ click: function() { this.get('content').my_method(); } }); 

Template:

 {{#view App.MyView contentBinding="App.controller"}} First view: Click me {{/view}} {{#view Ember.View contentBinding="App.controller"}} 2nd view: {{content.a}} {{/view}} {{#view Ember.View contentBinding="App.controller"}} Third view: <ul> {{#each content.a}} <li>{{this}}</li> {{/each}} </ul> {{/view}} 

Answer 1

You are binding the second view to the array, but you are not doing it in the helper / view, which sets the watchers of the array. Thus, the opinion is not informed that the property is changing, because it does not change. The array mutates, but the property itself does not change. Arrays and objects are passed by reference in JS, so even if you change the contents of the array, if you do not observe changes in the contents of the array, you will not be notified of any difference. #each uses a collection view that sets up these observers, just a binding to the property itself will not.