checkbox ऑरलिया के साथ अनचेक और चेक पर फ़ंक्शन कैसे कॉल करें




aurelia aurelia-binding (2)

मेरे पास एपीआई से आने वाली वस्तुओं की एक सूची है और वे हमेशा समान नहीं होंगे, इसलिए सरणी में मौजूद वस्तुओं की संख्या हमेशा बदलती रहती है। मैं प्रत्येक आइटम के लिए एक चेकबॉक्स बना रहा हूँ

उपयोगकर्ता में प्रत्येक आइटम की जांच / अनचेक करने की क्षमता है यहाँ मैं क्या करना चाहता हूं:

  1. जब कोई आइटम चेक होता है, तो वह उस आइटम की आईडी को एक सरणी में धक्का देगा
  2. जब कोई आइटम अनचेक होता है, तो वह उस आइटम की आईडी को सरणी से निकाल देगा

मुझे सिर्फ यह जानना होगा कि मैं किस आधार पर कुछ कॉल करता हूं कि क्या यह जाँच या अनियंत्रित था। मैंने एक "चेक.डिलागेट" और "चेक.ट्रिगर" की कोशिश की है और मुझे ऐसा करने के लिए काम करने के लिए प्रतीत नहीं हो सकता

सिर्फ एक नियमित क्लिक.डिजिटेट काम नहीं करेगा क्योंकि मैं यह स्थिति नहीं रख सकता कि यह सच है या गलत है और मैं उन सभी के लिए चर सेट नहीं कर सकता क्योंकि मुझे हमेशा यह नहीं पता है कि कौन से आइटम आने वाले हैं एपीआई कोई सुझाव?


change.delegate कोशिश change.delegate या change.trigger इस तरह से:

वीएम विधि:

logchange(value) {
  console.log(value);
}

राय:

<input type="checkbox" change.delegate="logchange($event.target.checked)" />

एक तरह से आप यह कर सकते हैं एक सेटर की मदद से। मान लें कि आपके पास इस तरह एक चेकबॉक्स है:

<input type="checkbox">

अपने दृश्य मॉडल में एक निजी फ़ील्ड बनाएं और फिर इसे गेटेर और एक सेटर के साथ लपेटें:

get isChecked(){
    return this._isChecked;
}

set isChecked(value){
    this._isChecked = value;
    //enter your extra logic here, no need for an event handler
}

private _isChecked: boolean;

तब बाइंड को देखने के लिए isChecked किया गया है:

<input type="checkbox" checked.bind="isChecked">

हर बार जब चेकबॉक्स को चेक या अनचेक किया जाता है तो सेटर को बुलाया जाएगा और आप सेटर के भीतर से किसी भी तरीके से कॉल कर सकते हैं।

इसे प्राप्त करने के लिए एक और और अपरंपरागत तरीका यह है कि @bindable डेकोरेटर का उपयोग करके इस तरह से:

@bindable isChecked: boolean;

यह अपरंपरागत है क्योंकि आप संभवतः नहीं चाहते हैं कि isChecked की जा सकती है, लेकिन डेकोरेटर आपको isCheckedChanged विधि से प्रवेश देता है:

isCheckedChanged(newValue, oldValue){
     //Logic here
}

और निश्चित रूप से change घटना है, जिसे आप change साथ पकड़ सकते हैं। change.trigger और change.delegate लेकिन यह एक अन्य जवाब में पहले से ही उल्लेख किया गया है