क्या आप आंशिक दृश्य को बाँधने के लिए ko.applyBindings को कॉल कर सकते हैं?

Question

मैं नॉकआउट जेएस का उपयोग कर रहा हूं और एक मुख्य दृश्य और दृश्य मॉडल है। मुझे एक और दृश्य के साथ पॉपअप करने के लिए एक डायलॉग (jQuery UI एक) चाहिए, जो एक अलग चाइल्ड व्यू मॉडल के लिए बाध्य हो।

संवाद सामग्री के लिए HTML को AJAX का उपयोग करके पुनर्प्राप्त किया जाता है, इसलिए मैं ko.applyBindingsअनुरोध पूरा होने के बाद एक बार कॉल करने में सक्षम होना चाहता हूं , और मैं डायलॉग डिव के अंदर ajax के माध्यम से लोड किए गए HTML के भाग को चाइल्ड व्यू मॉडल को बांधना चाहता हूं।

क्या यह वास्तव में संभव है या क्या मुझे पेज को शुरू में लोड करने और फिर ko.applyBindingsएक बार कॉल करने पर मेरे सभी विचारों और दृश्य मॉडल को लोड करने की आवश्यकता है ?

Answer 1

ko.applyBindings एक दूसरे पैरामीटर को स्वीकार करता है जो मूल के रूप में उपयोग करने के लिए एक DOM तत्व है।

यह आपको कुछ ऐसा करने देगा:

<div id="one">
  <input data-bind="value: name" />
</div>

<div id="two">
  <input data-bind="value: name" />
</div>

<script type="text/javascript">
  var viewModelA = {
     name: ko.observable("Bob")
  };

  var viewModelB = {
     name: ko.observable("Ted")
  };

  ko.applyBindings(viewModelA, document.getElementById("one"));
  ko.applyBindings(viewModelB, document.getElementById("two"));
</script>

इसलिए, आप इस तकनीक का उपयोग करके अपने डायलॉग में लोड की गई डायनामिक सामग्री को देखने के लिए बाँध सकते हैं। कुल मिलाकर, आप बस applyBindingsएक ही तत्व पर कई बार कॉल नहीं करने के लिए सावधान रहना चाहते हैं, क्योंकि आपको कई इवेंट हैंडलर संलग्न होंगे।

Comments

यदि आप सड़क से नीचे किसी बिंदु पर बाइंडिंग निकालना चाहते हैं, तो आप या तो ko.cleanNode(document.getElementById("one")चीजों ko.removeNode(document.getElementById("one")को साफ करने के लिए या चीजों को साफ करने के लिए और डोम से नोड को हटा सकते हैं।

— माइकल बर्कोम्पास

बस एक ध्यान दें कि cleanNodeऔर removeNodeईवेंट हैंडलर्स को दूर नहीं होगा, इसलिए कुछ सावधानी बरतें। कुछ मामलों में, उन क्षेत्रों पर templateया withबाध्यकारी का उपयोग करना बेहतर होता है , इसलिए आपके पास नए तत्व हैं।

— आरपी नीमेयर

यह वर्तमान में कुछ ऐसा है जिसमें कोओ की कमी है। हम लोगों के लिए विशेष रूप से "विद्रोह" वर्गों का इरादा नहीं रखते हैं। हालांकि, KO jQuery का उपयोग करके घटनाओं को संलग्न करता है, यदि इसे संदर्भित किया जाता है, तो आप $(element).unbind();सभी हैंडलर को हटाने के लिए कर सकते हैं ।

— आरपी नीमेयर

ये कार्य कहां लागू होते हैं (लागू होते हैं, क्लीननोड, रिमेनडाउन) प्रलेखित? मैं पीरियड्स पर उनके फंक्शन सिग्नेचर नहीं ढूँढ सकता।

— एरिकपी

अच्छा होगा अगर यह कहीं प्रलेखन के भीतर आसानी से पता लगाने योग्य था। मैंने इसका उल्लेख भी नहीं देखा।

— ट्रैविस कॉफमैन

Answer 2

जबकि नीमियर का उत्तर प्रश्न का अधिक सही उत्तर है, आप निम्नलिखित कार्य भी कर सकते हैं:

<div>
  <input data-bind="value: VMA.name" />
</div>

<div>
  <input data-bind="value: VMB.name" />
</div>

<script type="text/javascript">
  var viewModels = {
     VMA: {name: ko.observable("Bob")},
     VMB: {name: ko.observable("Ted")}
  };

  ko.applyBindings(viewModels);
</script>

इसका मतलब है कि आपको DOM तत्व को निर्दिष्ट करने की आवश्यकता नहीं है, और आप कई मॉडल को एक ही तत्व से बांध सकते हैं, जैसे:

<div>
  <input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>

Comments

आप पेज के क्षेत्रों को अलग-अलग मॉडल के लिए आवंटित करने के लिए "के साथ" का उपयोग कर सकते हैं - डेटा-बाइंड = "के साथ: वीएमए"

— lexicalscope

@flamingpenguin: हाँ, लेकिन withसस्ता नहीं आता, देखें: लिंक

— mhu

Answer 3

मैं एक कस्टम मॉडल को रनटाइम पर एक तत्व में बांधने में कामयाब रहा हूं। कोड यहाँ है: http://jsfiddle.net/ZiglioNZ/tzD4T/457/

दिलचस्प बिट यह है कि मैं डेटा-बाइंड विशेषता को उस तत्व पर लागू करता हूं जिसे मैंने परिभाषित नहीं किया है:

    var handle = slider.slider().find(".ui-slider-handle").first();
    $(handle).attr("data-bind", "tooltip: viewModel.value");
    ko.applyBindings(viewModel.value, $(handle)[0]);

Comments

2.3 को परेशान करने के लिए, ऊपर दिया गया कोड एक ग्राहक हैंडलर में है, जिसे तब कॉल किया जाता है जब मैं वैश्विक ko.applyBindings () लागू करता हूं। तो अब मुझे त्रुटि मिलती है "आप एक ही तत्व पर कई बार बाइंडिंग लागू नहीं कर सकते।" मैं अभी भी यह जानने की कोशिश कर रहा हूं कि मुझे त्रुटि क्यों मिली। क्या हम एक ही चर को कई बार, प्रत्येक को अलग-अलग तत्वों में बाँध सकते हैं?

— जिग्लियोयूके

यहाँ ko 2.3 वाला संस्करण है जो काम नहीं करता है: jsfiddle.net/ZiglioNZ/tzD4T/458

— ZiglioUK

आंशिक दृश्य पर लागू होने से पहले ko.cleanNode () पर कॉल जोड़ना मदद करने के लिए प्रतीत नहीं होता है: jsfiddle.net/ZiglioNZ/tzD4T/459

— ZiglioUK

हल किया गया: मुझे भी आवेदन कॉल करने की आवश्यकता नहीं थी!

— ज़िग्लिओयूके

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

— जियोमोरिलो

Answer 4

आपको withबंधन, साथ ही http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html देखना चाहिएcontrolsDescendantBindings

Comments

यह जटिल लग रहा है। क्या कोई 3.0 किसी भी सरल होने जा रहा है?

— ज़िग्लिओयूके