Embedded Observable Card

It should be easy, but I can't figure it out. I am creating a view that behaves a bit like a tri-state multiple choice, and the main component is a property in the view that lists all the options and its status:

TriState = Ember.View.extend({
    ...
    childView: TristateItem,
    selectionStates: {}
});

TristateItem = Ember.View.extend({
    ...
    selectedState: function() {
        var value = this.get('value');
        var states = this.get('parentView.selectionStates');
        var state = states[value];
        if (Ember.isNone(state))
            return 0;
        return state;
    }.property('value', 'parentView.selectionStates'),

    click: function(event) {
        var states = this.get('parentView.selectionStates');
        var value = this.get('value');
        var newState = states[value];
        if (Ember.isNone(newState) || newState == 0)
            newState = 1;
        else if (newState == 1)
            newState = -1;
        else
            newState = 0;
        states[value] = newState;
        event.stopPropagation();
    }

      

So after a few clicks the value selectionStates

might be

{0: 1,   // value "0" is selected with state "1"
 3: -1,  // value "3" is selected with state "-1"
 4: 0}   // value "4" is not selected

      

This works great, but the value TristateItem.selectedState

doesn't change. I assume this is because it is not possible to observe a javascript object, but I cannot find anything observable in Ember that is equivalent. How can i do this?

+3


source to share


1 answer


Since you are setting a property, you can simply use notifyPropertyChange to tell another computed property that the parent is somehow polluted.

this.notifyPropertyChange('parentView.selectionStates');

      



http://emberjs.jsbin.com/tokese/1/edit

+1


source







All Articles