观察数组并在ember.js中获得更改的值

Question

Here's the component:

export default Ember.Component.extend({
    columns: []

    _watchColumns: function () {
        // console.log(changedValue);
    }.observes('columns.@each.name')

    // other code
});

I'd like to get the changed value in _watchColumns method. Is it possible?

Answer 1

I don't think this is possible. A workaround might be to use a component for each item.

My-Columns component

//my-columns.js
export default Ember.Component.extend({
    columns: null
});

//my-columns.hbs
{{#each columns as |column|}}
    {{my-column value=column}}
{{/each}}

My-Column component

//my-column.js
export default Ember.Component.extend({
    nameUpdated : Ember.computed('value.name', function() {
        console.log(this.get('value.name'));
    });
});

---

Another tip: never set a property to [] or {} in a component as it will be shared across all instances of the compoent (like a static property - unless you want this behaviour of course). In your case the user will override it by passing in their own columns object but it is helpful to know anyway. If you need an array in your component you can do this:

export default Ember.Component.extend({
    myArray : null,
    init : function() {
        this._super.apply(this, arguments);
        this.set('myArray', []);
    }
});