एम्बर नेस्टेड सरणी संपत्ति देखने योग्य

एम्बर में एक नेस्टेड सरणी पर देखने योग्य संपत्ति को सेट करते समय मेरी संपत्ति अधिसूचित नहीं होती है।

size: function(){
      var result = "no size";

      this.get('data.properties').forEach(function (g) {
        if (g.group == "style") {
            g.items.forEach(function (p) {
                if (p.id == 'size') result = p.computedValue();
            });
        }
      });

    console.log(result);

    return result;
}.property('[email protected]@each.value')

इस SO स्वीकृत उत्तर में: https://stackoverflow.com/a/9381152/2068563 यह कहता है कि यह काम करना चाहिए।

But for me the propurty is only computed at init. here is the fiddle: http://jsfiddle.net/jmorvan/eVWfj/

कोई विचार?

2

1 उत्तर

ठीक है, समाधान इस तरह की घटना को बुलबुला करने के लिए देखे गए गणना की गई गुणों को लिंक करना है:

App.groupObj = Ember.Object.extend({
    group: "style",
    name: "Style",
    _changed: 0,
    changed: function (key, value) {
        if (value) {
            this.set('_changed', value);
        }
        return this.get('_changed');
    }.property(),
    itemChanged: function() {
        this.set('changed', +new Date());
        console.log('item changed!');
    }.observes('[email protected]'),

    items: []
});

App.itemObj = Ember.Object.extend({
    _val: 6,
    id: null,
    name: null,
    group: null,
    fieldType: null,
    val: function (key, value) {
        if (value) {
            this.set('_val', value);
        }

        return this.get('_val');
    }.property(),
    computedValue: function() {
        return this.val;
    }
});

असल में, ग्रूओ ऑब्जेक्ट आइटम की वैल प्रॉपर्टी पर किसी भी कार्रवाई को सुनता है और अपनी खुद की बदली हुई संपत्ति अपडेट करता है। इस तरह से मैं कर सकता हूँ:

size: function(){
      var result = "no size";

      this.get('data.properties').forEach(function (g) {
        if (g.group == "style") {
            g.items.forEach(function (p) {
                if (p.id == 'size') result = p.computedValue();
            });
        }
      });

    console.log(result);

    return result;
}.property('[email protected]')

मुझे लगता है कि मेरा पहला मिलास्टैक यह सोचना था कि एम्बर जादुई रूप से मेरे घोंसले हुए वस्तुओं पर बदलाव लेने जा रहा था।

मैंने यह भी सोचा कि गणना की गई संपत्तियों को जोड़ना काम करेगा, जो स्पष्ट रूप से नहीं था! (क्यूं कर?)

the updated fiddle: http://jsfiddle.net/jmorvan/LEyCD/

संपादित करें

चूंकि यह प्रत्येक ऑब्जेक्ट पर लागू करने में काफी लंबा था, इसलिए मैंने चयनकर्ता के आधार पर अवलोकन योग्य के साथ अपना स्वयं का ऑब्जेक्ट बनाया।

    App.changeAwareArray = Ember.ArrayProxy.extend({
    init: function() {

        this.set('content', []);
        this._super();
        if (!this.get('changeSelector')) this.set('changeSelector', '_changed');

        this.addObserver('[email protected]' + this.get('changeSelector'), this.handleChange);
    },
        _changed: null,
    handleChange: function() {
        this.set('_changed', +new Date());
    }
});

App.changeAwareObject = Ember.Object.extend({
init: function() {
        this._super();
        if (!this.get('changeSelector')) this.set('changeSelector', '_changed');

        this.addObserver(this.get('changeSelector'), this.handleChange);
    },
        _changed: null,
    changed: function (key, value) {
        if (value) {
            this.set('_changed', value);
        }
        return this.get('_changed');
    }.property(),
    handleChange: function() {
        this.set('_changed', +new Date());
    }
});

अब आप उन्हें देखने के लिए चेन कर सकते हैं:

    App.groupObj = App.changeAwareObject.extend({
    changeSelector:'items._changed',
    group: "style",
    name: "Style",
    items: App.changeAwareArray.create()
});

App.itemObj = Ember.Object.extend({
    _val: 6,
    _changed: null,
    id: null,
    name: null,
    group: null,
    fieldType: null,
    val: function (key, value) {
        if (value) {
            this.set('_val', value);
            this.set('_changed', +new Date());
        }
        return this.get('_val');
    }.property(),
    computedValue: function() {
        return this.val;
    }
});

और अपने दृश्य/नियंत्रक में डेटा प्राप्त करें:

    App.IndexView = Ember.View.extend({
    init: function() {
        this._super();
        //populate the Array
        this.data.properties.pushObject(createData());
    },
    elementId: "test",
    size: function() {
        var result = "no size";

        this.get('data.properties').forEach(function (g) {
            if (g.group == "style") {
                g.items.forEach(function (p) {
                    if (p.id == 'size') result = p.computedValue();
                });
            }
        });

        return result;
    }.property('data.properties._changed'),
    offset: function() {
        var result = "no offset";

        this.get('data.properties').forEach(function (g) {
            if (g.group == "style") {
                g.items.forEach(function (p) {
                    if (p.id == 'offset') result = p.computedValue();
                });
            }
        });

        return result;
    }.property('data.properties._changed'),
    data:{
        name: "base",
        properties: App.changeAwareArray.create()
    }
});

you can find a working fiddle here: http://jsfiddle.net/jmorvan/VRVac/

1
जोड़ा