knockout.js: बाइंडिंग अपडेट करें?

Question

जब मैं do में किसी भी नए तत्व को ko.applyBindings() के बाद इंजेक्ट करता हूं; कहा जाता था, तो नॉकआउट इन नए तत्वों को पहचान नहीं पाएगा। मैं समझ सकता हूं कि यह क्यों हो रहा है - वे नॉकआउट द्वारा अनुक्रमित नहीं हैं।

तो, मैंने पहले सोचा था कि यह मेरे नए तत्व जोड़ने के बाद, फिर से ko.applyBindings() को कॉल करके हल किया जाएगा, लेकिन फिर मुझे एहसास हुआ कि प्रत्येक ko.apply बाइंडिंग्स() कॉल के लिए आप करते हैं, जैसा कि घटनाएं होती हैं कई बार निकाल दिया। तो पांच बार आवेदन करने के बाद, एक क्लिक: बाइंडिंग को पांच बार निकाल दिया जाएगा, इसलिए यह एक वांछनीय समाधान नहीं है;)

क्या कुछ भी है जैसे ko.update बाइंडिंग्स() या कुछ और, नॉकआउट को बताने के लिए .. तत्व बाइंडिंग अद्यतन करें?

अभिवादन, क्रिस

Answer 1

हर बार जब आप आह्वान ko.applyBindings पूरे DOM बाइंडिंग के लिए निरीक्षण किया जाता है। नतीजतन आप प्रत्येक तत्व के लिए कई बाइंडिंग प्राप्त करेंगे यदि आप इसे एक से अधिक बार करते हैं।

ko.applyBindings(viewModelA, document.getElementById("newElement")); 

इस संबंधित सवाल देखें::

Can you call ko.applyBindings to bind a partial view?

Answer 2

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

इसके बजाय आपको दृश्य में परिवर्तन को दर्शाने के लिए अपना दृश्य मॉडल अपडेट करना चाहिए, जिसके बाद आपका नया तत्व प्रकट हो सकता है।

तो उदाहरण के लिए, आपके $('body').append('<a href="#" data-bind="click: something">Click me!</a>'); के लिए, बटन को दिखाई देने पर DOM तत्व जोड़ने के बजाय, दृश्य मॉडल का उपयोग करके बटन दृश्यता को नियंत्रित करें।

तो आपके विचार मॉडल

var viewModel = { clickMeAvailable: ko.observable(false) } 

भी शामिल है और अपने HTML

<a href="#" data-bind="click: something, visible: clickMeAvailable">Click me!</a> 

जब ऐसा आवेदन स्थिति परिवर्तन मुझे बटन पर क्लिक करें उपलब्ध है तो बस viewModel.clickMeAvailable(true) भी शामिल है, तुम।

ऐसा करने का बिंदु, और नॉकआउट का एक बड़ा हिस्सा प्रस्तुति से व्यावसायिक तर्क को अलग करना है। तो कोड जो मुझे उपलब्ध कराता है, परवाह नहीं करता है कि मुझे क्लिक करें एक बटन शामिल है। जब मैं क्लिक करता हूं तो यह सब viewModel.clickMeAvailable अपडेट होता है।

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

लेकिन फिर आप फॉर्म को वैध होने के बाद चीजों को बदलने का फैसला करते हैं, एक कानूनी समझौता दिखाई देता है जिसे सहेजने से पहले सहमति दी जानी चाहिए। आपके फॉर्म का तर्क बदलता नहीं है - यह फॉर्म वैध होने पर भी formValid सेट करता है। formValid परिवर्तनों में परिवर्तन होने पर आप बस बदलेंगे।

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

Answer 3

मुझे पता है कि आपने बहुत समय पहले पूछा था, लेकिन मैं बस इसी तरह की समस्या पर ठोकर खाई। मैंने कंटेनर में नए तत्व जोड़ने की कोशिश की और उनको एक ऑनक्लिक फ़ंक्शन दिया। पहली बार आपने जो चीजें की थीं, और यहां तक ​​कि ColinErecommended दृष्टिकोण की कोशिश की। यह मेरे लिए एक व्यावहारिक समाधान नहीं था, इसलिए मैं SamStephens दृष्टिकोण की कोशिश की और कहा कि के साथ आया था, जो मेरे लिए पूरी तरह से workes:

HTML:

<div id="workspace" data-bind="foreach:nodeArr, click:addNode"> 
<div class="node" data-bind="attr:{id:nodeID},style:{left:nodeX,top:nodeY},text:nodeID, click:$parent.changeColor"></div> 
</div> 

जावास्क्रिप्ट:

<script> 
function ViewModel() { 
var self = this; 
var id = 0; 
self.nodeArr = ko.observableArray(); 
self.addNode = function (data, event) { 
    self.nodeArr.push({ 
     'nodeID': 'node' + id, 
     'nodeX' : (event.offsetX - 25) + 'px', 
     'nodeY' : (event.offsetY - 10) + 'px' 
    }) 
    id++; 
} 
self.changeColor = function(data, event){ 
    event.stopPropagation(); 
    event.target.style.color = 'green'; 
    event.target.style.backgroundColor = 'white'; 
} 
} 
ko.applyBindings(new ViewModel()); 
</script> 

आप कर सकते हैं मैंने बनाया JS Fiddle में इसके साथ खेलो। आशा है कि यह अभी भी किसी की मदद करेगा।