एकाधिक मान अपडेट के साथ नॉकआउट

Question

जब मैं नॉकआउट का उपयोग करने की बात करता हूं तो मैं नौसिखिया हूं, मैं वास्तव में उस वेब पर इसका उपयोग अधिकतम करना चाहता हूं जिसे मैं विकसित कर रहा हूं। लेकिन जब मुझे कई उपयोगकर्ता घटनाओं को सुनने के लिए ब्राउज़र की क्षमता की बात आती है तो मुझे चिंता हो रही है। मेरा मानना ​​है कि नॉकआउट वैल्यूडेट नामक संपत्ति को लागू करता है। अब तक, मैंने केवल 'afterkeydown' और 'blur' का उपयोग किया है। लेकिन मुझे एक ही समय में कई घटनाओं को सुनने के लिए अपने ब्राउज़र की ज़रूरत है। नीचे उपयोगकर्ता कार्यक्रम हैं जो मेरे ब्राउज़र को सुनना चाहिए:

1. पेज लोड पर, मैं चाहता हूं कि मेरे इनपुट फ़ील्ड पेज लोड पर मान्य होना शुरू करें।
2. धुंध पर, मैं चाहता हूं कि मेरे इनपुट फ़ील्ड फोकस खोने के बाद मान्य हो जाएं।
3. कुंजी के बाद, मैं यह भी चाहता हूं कि उपयोगकर्ता अपने कुंजी को फिर से सत्यापित करने के बाद उपयोगकर्ता को एक कुंजी दबाए।
4. सबमिट पर, हालांकि मेरे फ़ील्ड किसी रूप में लिपटे नहीं हैं, फिर भी उपयोगकर्ता "फ़ील्ड" बटन पर क्लिक करने के बाद भी अपने फ़ील्ड को सत्यापित करना चाहता हूं।

मैं कुछ इस तरह की सोच रहा हूँ:

<input data-bind="value:someObservable, valueUpdate:'blur' + 'afterKeyDown' + 'onLoad' + 'onClickOfSaveButton'" /> 

-> ऐसा कुछ है, हालांकि मैं जानता हूँ कि यह एक सिंटैक्स त्रुटि का कारण होगा, लेकिन मुझे आशा है कि आप मेरी बात मिलता है।

मुझे पता है, यह सवाल थोड़ी उलझन में है, लेकिन यदि आप अधिक जानकारी चाहते हैं, तो कृपया इसे अपनी टिप्पणी पर निर्दिष्ट करने में संकोच न करें। मुझे वास्तव में यहां मदद की ज़रूरत है। धन्यवाद।

Answer 1

मैं एक fiddle यह दर्शाता है कि कैसे पर खेतों मूल्य को मान्य बनाया: फोन करके

• लोड explictly अगर है
• जब मूल्य द्वारा बदला 'valueUpdate: afterKeyDown' पैरामीटर
• सही से डेटा भेजने से पहले सबमिट विधि में स्पष्ट रूप से वैध है।

दृश्य:

<div> 
    <input type="text" data-bind="value: name, valueUpdate : 'afterkeydown'" /> 
    <br/> 
    <button data-bind="click: submit">Submit</button> 
</div> 

जे एस:

ko.validation.configure({ 
    decorateElement: true, // add 'validationElement' class on invalid element 
}); 

var VM = function() { 
    var self = this; 
    self.name = ko.observable("0").extend({ 
     minLength: 3 
    }); 
    self.isValid = function() { 
     self.name.valueHasMutated(); 
     return self.name.isValid(); 
    } 

    self.submit = function() { 
     if (self.isValid()) { 
      // server call 
     } 
    }; 
}; 

var vm = new VM(); 
ko.applyBindings(vm); 
vm.isValid(); 

See fiddle

मैं सत्यापन परीक्षण करने के लिए knockout.validation इस्तेमाल किया।

Answer 2

नॉकआउटजेएस पर स्विच करने का निर्णय लेने के लिए हमेशा 'नौसिखिया' तय करने में खुशी हुई। कुछ भी जो वर्बोज़ की दुनिया से छुटकारा पाने में मदद कर सकता है, विज्ञापन-बाध्यकारी समाधान विज्ञापन एक अद्भुत बात है।

अपने डेटा-बाइंडिंग मान को अद्यतन करने के लिए कई घटनाओं बंद प्रमुख करने के लिए कैसे के बारे में अपने सवाल का जवाब करने के लिए, आप लिखते हैं:

मेरे मामले में, मैं एक बूटस्ट्रैप Typeahead उपयोग कर रहा था कोई मान चुनें, लेकिन उपयोगकर्ता ने ड्रॉपडाउन सुझाव बॉक्स से चयन करने के बाद डेटा-बाइंडिंग को रीफ्रेश नहीं किया जा रहा था। स्रोत को देखने के बाद, मुझे यह छोटा छुपा मणि मिला जिसे केओ डॉक्स पर उल्लेख नहीं किया गया था।

मैं किसी को भी "स्रोत पढ़ने के लिए" कहने के लिए कह रहा हूं, लेकिन यदि आप ड्रेक्स में शामिल नहीं हैं, तो डरो मत! मैं इतना

स्रोत करके कई गैर-दस्तावेजी सुविधाओं का पर्दाफाश किया है: https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/value.js

ko.bindingHandlers['value'] = { 
    'init': function (element, valueAccessor, allBindingsAccessor) { 
     // Always catch "change" event; possibly other events too if asked 
     var eventsToCatch = ["change"]; 
     var requestedEventsToCatch = allBindingsAccessor()["valueUpdate"]; 
     var propertyChangedFired = false; 
     if (requestedEventsToCatch) { 
      // Allow both individual event names, and arrays of event names 
      if (typeof requestedEventsToCatch == "string")  
       requestedEventsToCatch = [requestedEventsToCatch]; 
      ko.utils.arrayPushAll(eventsToCatch, requestedEventsToCatch); 
      eventsToCatch = ko.utils.arrayGetDistinctValues(eventsToCatch); 
     } 
    .... truncated .... 

बाइंडिंग लेखन के साथ अपने परिचित के आधार पर, यह काफी स्पष्ट है कि valueUpdate बंधन घटनाओं की एक सरणी संभालती है हो सकता है। यहां उन्हें पूरक बाध्यकारी "valueUpdate" मिल रहा है और इसे var requestedEventsToCatch में संग्रहीत किया जा रहा है। अगली टिप्पणी मूल्य को अद्यतन करने के लिए घटनाओं की एक श्रृंखला को संभालने के लिए तर्क को चिह्नित करती है - वास्तव में उन्होंने "afterKeyDown" से ["afterKeyDown"]

आशा करता है कि यह भी मदद करता है!

Answer 3

आपको textInput बाध्यकारी जांचना चाहिए। पाठ इनपुट फ़ील्ड के मूल्य को प्रभावित करने वाली सभी प्रकार की घटनाओं को सही ढंग से सुनने का यह सबसे अच्छा तरीका है।

<input data-bind="textInput: userName" /> 

मूल्य बंधन के विपरीत, TextInput उपयोगकर्ता इनपुट के सभी प्रकार, स्वत: पूर्ण, खींचें और ड्रॉप, और क्लिपबोर्ड घटनाओं सहित के लिए डोम से तत्काल अपडेट प्रदान करता है।

http://knockoutjs.com/documentation/textinput-binding.html