Knockout.JS:</p> <pre><code><input type="text" data-bind="value: myText, valueUpdate: 'keyup'" /> </code></pre> <p>यह प्रत्येक KeyUp पर नमूदार अद्यतन करता है: परिवर्तन के आधार पर ट्रिगर एक नमूदार

Question

में मैं एक इनपुट तत्व है जो एक नॉकआउट नमूदार करने के लिए बाध्य कर रहा है। जब मूल्य बदलता है तो अब मैं अतिरिक्त घटनाओं को ट्रिगर करना चाहता हूं।

निम्नलिखित सिद्धांत रूप में यह करता है:

this.myTextTrigger = ko.computed(function() { 
    console.log(this.myText()); 
}, this); 

हालांकि, यह कुछ हद तक भद्दा लगता है। यह टेम्पलेट के प्रारंभिक तत्कालता पर भी ट्रिगर करता है, जहां मैं केवल उसके बाद परिवर्तनों को संभालना चाहता हूं। क्या अवलोकन में परिवर्तनों के आधार पर ईवेंट ट्रिगर करने का कोई आधिकारिक/आसान तरीका है?

Answer 1

उपयोग सदस्यता ली है:

this.myText.subscribe(function (newText) { 
    console.log(newText); 
}); 

आप इस ट्रिगर आप एक custom binding writting विचार कर सकते हैं, पुन: उपयोग करना चाहते हैं।

Answer 2

आप अपने बंधन तो का उपयोग allBindings.get(nameOfOtherBinding) और उस तत्व है जो एक समारोह की ओर इशारा करते है बंधन के नाम का उल्लेख करने के nameOfOtherBinding पैरामीटर सेट में अतिरिक्त जानकारी पाने के लिए कोशिश कर रहे हैं। या तो एचटीएमएल में फ़ंक्शन को शाब्दिक रखें या सुनिश्चित करें कि आप हैंडलर परिभाषा के दायरे में उस फ़ंक्शन को पा सकते हैं (जैसे वैश्विक स्तर पर window ऑब्जेक्ट से जुड़ा हुआ है)।

http://knockoutjs.com/documentation/custom-bindings.html

JS Fiddle Example - http://jsfiddle.net/pqb4xubg/

जावास्क्रिप्ट कि हैंडलर सेट अप करना होगा (या तो init या अद्यतन में):

ko.bindingHandlers.generic = { 
    init: function(element, valueAccessor, allBindings){ 
     var val = 'nothing'; 
     // set your other bindings to get pulled in 
     var func = allBindings.get('func'); 
     // normal check if the binding is actually a function 
     if(typeof func === 'function'){ 
      // use the retrieved function 
      val = func(valueAccessor()); 
     } 
     element.innerText = val; 
    } 
}; 
var model = {a:'4', b:5}; 
ko.applyBindings(model); 

एचटीएमएल कि हैंडलर का प्रयोग करेंगे (नोटिस "मज़ेदार" बाध्यकारी वाले तत्व कैसे काम नहीं करते हैं):

<div data-bind="generic: a, func: function(val){ return val + 2; }"></div> 
<div data-bind="generic: a, fun: function(val){ return val + 2; }"></div> 
<div data-bind="text: a"></div> 
<div data-bind="generic: b, func: function(val){ return val + 2; }"></div> 
<div data-bind="generic: b, fun: function(val){ return val + 2; }"></div> 
<div data-bind="text: b"></div> 

आप मानक डीओएम ईवेंट हैंडलर सेट करने के लिए बाध्य के इनिट का भी उपयोग कर सकते हैं और बस उन कार्यों को jQuery की तरह कुछ स्पष्ट रूप से कॉल कर सकते हैं। धन्यवाद। अच्छा दिन।