Ember.js: View binding not working

Question

I have the following situation:

controller.hbs:

<div> <h2>Filters</h2>
{{view App.FilterView title="Company" activeMembersBinding="activeMembers"}}
</div>

filter.hbs

 <ul>
 {{#each activeMembers}}
    <li>{{this}}</li>
 {{/each}}
 </ul>

controller.js

App.CompanyController = Ember.Controller.extend({
    activeMembers: Embers.A(['a', 'b'])
});

Upto this point, everything works fine, but when I try to add a new member in the controller's array, nothing updates in the view:

controller.js

App.CompanyController = Ember.Controller.extend({
    activeMembers: Embers.A(['a', 'b']),

    actions:{
        addMember: function(member){
             var members = this.get('activeMembers');
             members.push(member);
             this.set('activeMembers', member);
        }
    }
});

Answer 1

You need to use pushObject instead of push, it's essentially a setter that Ember can observe and react to an array change.

members.pushObject(member);