नॉकआउट घटक में कस्टम तत्व का उपयोग कैसे करें?

Question

इस परिदृश्य पर एक नजर डालें:

ko.components.register('hello', { 
    viewModel: function() { }, 
    template: "<h1>hello wrold</h1>" 
}); 

अगर मैं <hello></hello> का उपयोग उत्पन्न एचटीएमएल परिणाम होगा:

<hello><h1>hello world</h1></hello> 

लेकिन क्या होगा अगर मैं यह चाहता हूँ:

<hello class="hello"><h1>hello world</h1></hello> 

तो कैसे क्या मैं किसी घटक में कस्टम तत्व टैग का संदर्भ प्राप्त कर सकता हूं?

Answer 1

कस्टम तत्व में घटक शामिल है, इसे इसका हिस्सा नहीं माना जाता है। foreach, template या with बाध्यकारी में उपयोग किए जाने वाले बाहरी टैग की तरह। यदि आप उस टैग को स्टाइल करना चाहते हैं, तो आपको इसे स्टाइल करने के लिए बाइंडिंग जोड़ना होगा। घटक इसकी सामग्री भर जाएगा।

<hello data-bind="css: 'hello'"></hello> 

---

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

अपने व्यू मॉडल के लिए फ़ैक्टरी फ़ंक्शन का उपयोग करें। इसमें घटक की जानकारी तक पहुंच होगी (जिसमें वर्तमान में केवल तत्व शामिल है element)

ko.components.register('hello', { 
    viewModel: { 
     createViewModel: function (params, componentInfo) { 
      var element = componentInfo.element; 
      ko.applyBindingsToNode(element, { css: 'hello' }); 
      return {}; 
     } 
    }, 
    template: "<h1>hello world</h1>" 
});