एम्बर, मेरा टेम्पलेट संपत्ति परिवर्तन पर अपडेट नहीं होता

Question

जब मैं उस प्रॉपर्टी को प्रतिपादित करता हूं तो मेरा टेम्पलेट अपडेट क्यों नहीं होता है? documentation बताता है कि {{each}} बाइंडिंग-जागरूक है, लेकिन स्पष्ट रूप से ऐसा कुछ है जिसे मुझे पता नहीं है।

हैंडलबार्स में सबकुछ की तरह, {{#each}} सहायक बाइंडिंग-जागरूक है। यदि आपका एप्लिकेशन सरणी में एक नया आइटम जोड़ता है, या किसी आइटम को हटा देता है, DOM को कोई भी कोड लिखने के बिना अपडेट किया जाएगा।

यहाँ मेरी नियंत्रक

App.MaintemplateController = Ember.Controller.extend({ 
    alist: ['foo', "bar"],   
    actions : { 
    addel: function(){ 
      this.alist.push('xpto'); 
      console.log(this.alist); 
    } 
    } 
}); 

मेरे टेम्पलेट में मैं निम्नलिखित कोड है है।

{{#each alist}} 
    <li>{{.}}</li> 
{{/each}} 
<button {{action 'addel'}}>Add element</button> 

डेटा ठीक से प्रदान की गई है, और जब मैं बटन पर क्लिक करें यह संपत्ति के लिए तत्वों संलग्न करता है, लेकिन टेम्पलेट ताज़ा नहीं है। क्यूं कर? मैं इसे अपने डेटा के साथ सिंक में कैसे रखूं?

Answer 1

आपका टेम्पलेट अपडेट नहीं हो रहा है क्योंकि आप एम्बर द्वारा .pushObject और .removeObject प्रदान किए गए सादे वेनिला जावास्क्रिप्ट .push का उपयोग कर रहे हैं। डिफ़ॉल्ट रूप से एम्बर एक बाध्यकारी जागरूक वातावरण में अच्छी तरह से खेलने के लिए सरणी प्रोटोटाइप को बढ़ाता है।

तो अपने टेम्पलेट अद्यतन बनाने के लिए आपको क्या करना चाहिए:

App.MaintemplateController = Ember.Controller.extend({ 
    alist: ['foo', "bar"],   
    actions : { 
    addel: function(){ 
     this.get('alist').pushObject('xpto'); 
     console.log(this.get('alist')); 
    } 
    } 
}); 

यहां महत्वपूर्ण लाइन this.get('alist').pushObject('xpto'); है इसके अलावा आप हमेशा .get() और .set() का उपयोग एंबर में वस्तुओं का उपयोग करने के लिए करना चाहिए अन्यथा बाध्यकारी तंत्र के बारे में पता नहीं होगा वस्तु में किए गए परिवर्तन।

उम्मीद है कि यह मदद करता है।