नॉकआउट

Question

द्वारा पाठ और html का मेल इस तरह मैं अपने एचटीएमएल

<a href="#">John <i class="person"></i></a> 

और साथ knockout.js का निर्माण करना चाहते हैं यह मैं क्या किया है है।

<a data-bind="text:name"><i class="person"></i></a> 

आप पूरे तत्वों लंगर की (केवल पाठ) अनुमान लगा सकते हैं पाठ इस मामले लंगर के अंदर पूरे टैग हटा दिया जाता है में बंधन की becuse निकाल दिया जाता है। मेरा समाधान नीचे है।

<a data-bind="html: name() + '<i class="person"></i>'"></a> 

डाटा-बाइंड में एचटीएमएल के साथ स्ट्रिंग कॉन्सट एक समाधान है लेकिन इसमें 2 बड़े नकारात्मक हैं। 'नाम' प्रोपरी सुरक्षित नहीं है इसलिए हम एचटीएमएल इंजेक्शन प्राप्त कर सकते हैं। डेटा-बाइंड विशेषताओं के अंदर HTML लिखते हुए बेकार है।

एक और समाधान है।

<a href="#"><span data-bind="text:name"></span><i class="person"></i></a> 

मुझे पता है कि हम केवल समाधान के लिए नए एचटीएमएल मार्कअप पेश कर रहे हैं। यह वही है जो मुझे सबसे अच्छा मिला है।

knockout.js में इस समस्या के लिए जाने-माने समाधान क्या है?

क्या हम केवल टेक्स्ट को अपडेट करने के लिए निर्दिष्ट कर सकते हैं, इसके अंदर के सभी तत्व पैरामीटर के माध्यम से बाइंडिंग पाठ के लिए नहीं?

या बेहतर समाधान?

Answer 1

अवधि का उपयोग करना पसंदीदा समाधान है। यदि टेक्स्ट बाइंडिंग सभी सामग्री को प्रतिस्थापित नहीं करती है, तो यह जानना मुश्किल है कि अपडेट करना क्या है और अगली बार जब यह बदलता है तो अपडेट नहीं किया जाता है। यदि आप तत्व के पहले बच्चे नोड से हमेशा निपटना चाहते हैं, तो आप मदद के लिए एक छोटा सा कस्टम बाध्यकारी लिख सकते हैं।

यहां एक साधारण prependText बाइंडिंग है। यह हमेशा उस तत्व के पहले बच्चे नोड को प्रतिस्थापित करेगा जिसमें बाध्यकारी होता है। तो, आप यह सुनिश्चित करना चाहते हैं कि पहला नोड कम से कम एक स्थान था।

<a href="#" data-bind="prependText: name"> <span> another element</span></a> 

नमूना:: http://jsfiddle.net/rniemeyer/5CfzH/

Answer 2

तुम भी KO उपयोग कर सकते हैं "containerless" अंकन

<!-- ko text: YourProperty --> 
<!-- /ko--> 

ही अन्य बाइंडिंग के साथ किया जा सकता है (

ko.bindingHandlers.prependText = { 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     //replace the first child 
     element.replaceChild(document.createTextNode(value), element.firstChild); 
    }   
}; 

इसे पसंद का प्रयोग करें जैसे कि foreach): See Part 4