2012-06-14 18 views
33

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

मैं उदाहरण के लिए एक उदाहरण प्रदान करूंगा कि किस तरह की कार्यक्षमता की आवश्यकता है।

आइए कहें कि मेरे पास कई इनपुट के साथ एक फॉर्म है। इसके अलावा मेरे पास एक दृश्य मॉडल है जो इस फ़ॉर्म से जुड़ा हुआ है। उपयोगकर्ता कार्रवाई पर प्रतिक्रिया के कारण किसी कारण से मुझे फॉर्म से अपने व्यू मॉडल को अनबिंड करने की आवश्यकता है, यानी कार्रवाई के बाद से मैं अपने सभी अवलोकनों को संबंधित मूल्यों के परिवर्तनों पर प्रतिक्रिया देना बंद कर देना चाहता हूं और इसके विपरीत - अवलोकन करने वाले किसी भी बदलाव इनपुट के मूल्यों को प्रभावित नहीं करते हैं।

इसे प्राप्त करने का सबसे अच्छा तरीका क्या है?

उत्तर

45

बाइंडिंग को हटाने के लिए आप ko.cleanNode का उपयोग कर सकते हैं। आप इसे विशिष्ट डीओएम तत्वों या उच्च स्तर के डीओएम कंटेनर (उदाहरण के लिए पूरे फॉर्म) पर लागू कर सकते हैं।

उदाहरण के लिए http://jsfiddle.net/KRyXR/157/ देखें।

+2

प्रतिभाशाली! धन्यवाद! – ILya

+2

अगली बार getElementById लिखें और $ ("# theid") [0] यह अभी भी जावास्क्रिप्ट का उपयोग करने के लिए बेहतर नहीं है और सब कुछ के लिए jQuery नहीं –

+18

उन परियोजनाओं के लिए जहां मैं jquery का उपयोग कर रहा हूं, मुझे आम तौर पर 1.5ms छोड़ने से बचने में खुशी होती है एक अतिरिक्त 15 अक्षर टाइप करना। मुझे लगता है कि जब मुझे मौका मिलता है तो मैं jquery चयनकर्ताओं के साथ रहूंगा। – Donamite

14

@ मार्क रॉबिन्सन उत्तर सही है।

फिर भी, मार्क उत्तर का उपयोग करके मैंने निम्नलिखित किया, जिसे आप उपयोगी पा सकते हैं।

// get the DOM element 
    var element = $('div.searchRestults')[0]; 
    //call clean node, kind of unbind 
    ko.cleanNode(element); 
    //apply the binding again 
    ko.applyBindings(searchResultViewModel, element); 
+0

+1 से मिलान करें, मुझे नॉकआउट की 'सक्षम' बाइंडिंग के स्वचालित-नेस को पुनर्स्थापित करने के लिए मैन्युअल रूप से अक्षम करने/सक्षम करने के बाद इसका उपयोग करना था। – lamarant

+0

के लिए – casey

1

<html> 
 
    <head> 
 
     <script type="text/javascript" src="jquery-1.11.3.js"></script> 
 
     <script type="text/javascript" src="knockout-2.2.1.js"></script> 
 
     <script type="text/javascript" src="knockout-2.2.1.debug.js"></script> 
 
     <script type="text/javascript" src="clickHandler.js"></script> 
 
    </head> 
 
    <body> 
 
     <div class="modelBody"> 
 
      <div class = 'modelData'> 
 
       <span class="nameField" data-bind="text: name"></span> 
 
       <span class="idField" data-bind="text: id"></span> 
 
       <span class="lengthField" data-bind="text: length"></span> 
 
      </div> 
 
      <button type='button' class="modelData1" data-bind="click:showModelData.bind($data, 'model1')">show Model Data1</button> 
 
      <button type='button' class="modelData2" data-bind="click:showModelData.bind($data, 'model2')">show Model Data2</button> 
 
      <button type='button' class="modelData3" data-bind="click:showModelData.bind($data, 'model3')">show Model Data3</button> 
 
     </div> 
 
    </body> 
 
</html>

@Mark रॉबिन्सन सही समाधान दिया, मैं एक डोम तत्व और इस एक डोम तत्व पर अलग दृष्टिकोण मॉडल को अद्यतन करने के साथ इसी तरह की समस्या है।

प्रत्येक दृश्य मॉडल में एक क्लिक ईवेंट होता है, जब प्रत्येक दृश्य मॉडल के हर बार क्लिक विधि पर क्लिक किया जाता है जिसके परिणामस्वरूप क्लिक ईवेंट के दौरान अनावश्यक कोड ब्लॉक निष्पादन होता है।

मैंने अपने वास्तविक बाइंडिंग लागू करने से पहले नोड को साफ करने के लिए @ मार्क रॉबिन्सन दृष्टिकोण का पालन किया, यह वास्तव में अच्छी तरह से काम करता था। धन्यवाद रॉबिन। मेरा नमूना कोड इस तरह चला जाता है।

function viewModel(name, id, length){ 
 
\t \t var self = this; 
 
\t \t self.name = name; 
 
\t \t self.id = id; 
 
\t \t self.length = length; 
 
\t } 
 
\t viewModel.prototype = { 
 
\t \t showModelData: function(data){ 
 
\t \t console.log('selected model is ' + data); 
 
\t \t if(data=='model1'){ 
 
\t \t \t ko.cleanNode(button1[0]); 
 
\t \t \t ko.applyBindings(viewModel1, button1[0]); 
 
\t \t \t console.log(viewModel1); 
 
\t \t } 
 
\t \t else if(data=='model2'){ 
 
\t \t ko.cleanNode(button1[0]); 
 
\t \t \t ko.applyBindings(viewModel3, button1[0]); 
 
\t \t \t console.log(viewModel2); 
 
\t \t } 
 
\t \t else if(data=='model3'){ 
 
\t \t ko.cleanNode(button1[0]); 
 
\t \t \t ko.applyBindings(viewModel3, button1[0]); 
 
\t \t \t console.log(viewModel3); 
 
\t \t } 
 
\t } 
 
\t } 
 
\t $(document).ready(function(){ 
 
\t \t button1 = $(".modelBody"); 
 
\t \t viewModel1 = new viewModel('TextField', '111', 32); 
 
\t \t viewModel2 = new viewModel('FloatField', '222', 64); 
 
\t \t viewModel3 = new viewModel('LongIntField', '333', 108); 
 
\t \t ko.applyBindings(viewModel1, button1[0]); 
 
\t }); 
 
\t