नॉकआउटजेएस कस्टम बाइंडिंग फायरिंग कई बार

Question

मैं एसी कस्टम बाइंडिंग का उपयोग करके एक अधिसूचना डीआईवी दिखाने की कोशिश कर रहा हूं, जबकि उस डीवी के सीएसएस और एचटीएमएल को 2 अवलोकनों के माध्यम से समायोजित करता हूं।

समस्या जब मैं उन 2 observables का मूल्य बदल, यह भी कस्टम किसी कारण के लिए भी बाध्यकारी आग है।

टेम्पलेट:

<div class="alert top-alert" data-bind="fade: topMessageShow, css: topMessageType, html: topMessage"></div> 

कस्टम हैंडलर:

ko.bindingHandlers.fade = { 
    update: function resolveFade(element, valueAccessor, allBindingsAccessor) { 
    if (ko.utils.unwrapObservable(valueAccessor())) { 
     $(element).hide().delay(300).fadeIn('slow'); 
    } else { 
     // fade out the notification and reset it 
     $(element).fadeOut('slow', function() { 
     // reset those 2 observables that set class and HTML of the notification DIV 
     MyClass.topMessageType(''); 
     MyClass.topMessage(''); 
     }); 
    } 
    } 
}; 

ट्रिगर कोड:

MyClass.topMessageType('alert-info'); 
MyClass.topMessage(msg); 
MyClass.topMessageShow(true); 

---

JSFiddle:http://jsfiddle.net/UrxXF/1/

Answer 1

इस तथ्य यह है कि सभी बाइंडिंग एक भी तत्व पर एक साथ आग से संबंधित है। यहां एक पोस्ट है जो वर्तमान व्यवहार का वर्णन करती है: http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html। यह वास्तव में केओ 3.0 में बदल रहा है जहां एक तत्व पर बाइंडिंग स्वतंत्र रूप से बनाए रखा जाता है।

ko.bindingHandlers.fade = { 
    init: function resolveFade(element, valueAccessor, allBindingsAccessor) { 
     ko.computed({ 
     read: function() { 
      /your logic goes here 
     }, 
     disposeWhenNodeIsRemoved: element 
     }); 
    } 
}; 

इस तकनीक आप update समारोह का अनुकरण कर रहे हैं, लेकिन यह स्वतंत्र रूप से से कार्य करने की अनुमति के साथ

:

एक विकल्प है कि अब आप के लिए इस्तेमाल कर सकते हैं init समारोह की तरह में अपने स्वयं के computed स्थापित करने के लिए है तत्व पर अन्य बाइंडिंग्स। एकमात्र मामूली कमी यह है कि आपको वर्तमान में बाध्यकारी स्ट्रिंग में अवांछित अवलोकनों से कोई निर्भरता नहीं मिलेगी (जैसे fade: topMessageShow()fade: topMessageShow के बजाय)।