CODEWITHSUNDEEP
ember.js
hekevintran
hekevintran

Reputation: 23742

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

In the code below, I render 3 views. The second and third views render App.controller.a. Clicking the first view changes App.controller.a. As you click, the third view updates its content. The second view does not update its content. Why?

I presumed that the second view binds to the array App.controller.a. It looks like 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();
    }
});

The 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}}

Upvotes: 2

Views: 1680

Answers (1)

Christopher Swasey
Christopher Swasey

Reputation: 10562

You're binding the second view to an array, but you're not doing it in a helper/view that sets up array observers. As such, the view isn't being informed that the property is changing, because it isn't changing. The array is mutating, but the property itself is not changing. Arrays and objects are passed by reference in JS, so even though you're modifying the contents of the array, unless you're observing changes to the array's contents you won't be notified of any difference. #each uses a collection view which sets up those observers, just binding to the property itself won't.

Upvotes: 6

Related Questions