2012-12-18 16 views
8

यह बाध्यकारी <event>Bubble: false की तरह लगता है केवल काम करता है जब वहाँ a defined event handler (देखें नोट 4) <event> के लिए के साथ तत्वों के लिए बुदबुदाती को रोकने के।knockoutjs: घटना कोई हैंडलर

यहां एक उदाहरण fiddle है।

कुछ घटनाओं के लिए देशी संचालकों होने तत्वों के लिए

(जैसे क्लिक करें: <textarea>, <a>, <select>, आदि), जहां देशी हैंडलर पर्याप्त होता है, मैं बंधन, जैसे, clickBubble: false उन पर, बिना एक बाध्य करने के लिए की स्थापना उम्मीद करेंगे काम करने के लिए "बोगस" हैंडलर।

मुझे लगता है कि मेरा सवाल है, क्या अतिरिक्त बाइंडिंग के बिना इसे हासिल करने का एक और नॉकआउट तरीका है?

उत्तर

22

Bubble संचालकों वास्तविक बाध्यकारी संचालकों नहीं हैं और event बाध्यकारी (click बाध्यकारी कॉल event बंधन) में विकल्प के रूप में इस्तेमाल कर रहे हैं। तो, वे खुद पर नहीं चलते हैं।

तो, आप "बोगस" नो-ऑप हैंडलर जोड़ सकते हैं और clickBubble का उपयोग कर सकते हैं या आप निश्चित रूप से यह करने के लिए कस्टम बाध्यकारी बनाना चुन सकते हैं।

हो सकता है कि कुछ इस तरह:

ko.bindingHandlers.preventBubble = { 
    init: function(element, valueAccessor) { 
     var eventName = ko.utils.unwrapObservable(valueAccessor()); 
     ko.utils.registerEventHandler(element, eventName, function(event) { 
      event.cancelBubble = true; 
      if (event.stopPropagation) { 
       event.stopPropagation(); 
      }     
     }); 
    }   
}; 

और फिर बस डाल:

<input data-bind="preventBubble: 'click'" /> 

आप भी इसे आगे बढ़ाने के यदि आवश्यक हो, घटनाओं की एक सरणी स्वीकार करने के लिए कर सकता है।

नमूना: http://jsfiddle.net/rniemeyer/WcXwZ/

+0

धन्यवाद, आरपी। मुझे लगता है कि आपकी बाधा के अनुसार 'यूटिल्स लाइब्रेरी' का कस्टम बाध्यकारी और उपयोग मल्टी-व्यू मॉडेल ऐप के लिए कहीं अधिक आकर्षक है और प्रत्येक वीएम कक्षा पर शर्मनाक हैंडलर की तुलना में पुन: प्रयोज्य है। मैंने आपका जवाब +1 कर दिया है और अन्य समाधानों के लिए निष्पक्ष होने के लिए केवल एक दिन या तो सौंपा गया है। मैं सबसे सुरुचिपूर्ण/उपयोगी, ईमानदार इंजन का चयन करना नहीं भूलूंगा। – Steven

संबंधित मुद्दे