无法在Ember.js中观察到对象数组？

Question

I have an array of objects within a component like this:

checkboxes: [
    {
        label: 'A',
        state: false
    },
    {
        label: 'B',
        state: false
    },
    {
        label: 'C',
        state: false
    }
]

In my Handlebars template, I have a loop to show the list of checkboxes and each checkbox state maps back to the array item like this:

{{#each checkboxes as |item|}}
    <li><input type="checkbox" checked={{item.state}}> {{item.label}}</li>
{{/each}}

I wrote an observer to observe changes to the array but it doesn't seem to work:

observeCheckboxes: function() {
    console.log(this.get('checkboxes').toArray());
}.observes('checkboxes.[]')

How do I observe changes to the checkbox states so I can get a list of checked items?

Answer 1

Change your observer to observe checkboxes.@each.state .

Have a look through the documentation here for a complete overview.

If possible, try to avoid using an observer, and rather use a computed property, and then also to rather define computed properties and observers as Ember.computed & Ember.observer.

Here is a twiddle that demonstrates why your observer is not firing.