पॉलिमर 1.0

Question

में बाइंडिंग के साथ टेक्स्ट रैपिंग तत्व मैंने पॉलिमर के साथ एक कस्टम वेब घटक बनाया है, जो पाठ को लपेटता है और इसे थोड़ा बदल देता है (अवधारणा के इस सबूत में अपरकेस में बदल रहा है)।

तत्व स्वयं स्थिर सामग्री के साथ ठीक काम करता है। हालांकि, जब सामग्री गतिशील रूप से बाध्य होती है, तो घटक सामग्री को दिखाने में विफल रहता है।

उदाहरण के लिए:

<my-wrapper>Hello, World!</my-wrapper> <!-- Works --> 
<my-wrapper>[[someText]]</my-wrapper> <!-- Doesn't work --> 

वर्तमान में मैं observeNodes का उपयोग कर रहा है, जो प्रारंभिक पाठ बदलने को गति प्रदान करने में सफल हुआ है, लेकिन उप-अनुक्रमिक परिवर्तन को गति प्रदान करने में विफल रहता है।

मेरे वर्तमान प्रोटोटाइप के रूप में परिभाषित किया गया है:

<dom-module id="my-wrapper"> 
    <template> 
    <span id="placeholder"></span> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-wrapper', 
     ready: function() { 
     var self = this; 
     Polymer.dom(Polymer.dom(this)).observeNodes(function(info) { 
      self.$.placeholder.textContent = info.target.textContent.toUpperCase(); 
     }); 
     /*var mutationObserver = new MutationObserver(function(e) { 
      console.log(e); 
     }); 
     mutationObserver.observe(this.root, {characterData: true, childList: true});*/ 
     }, 
    }); 
    </script> 
</dom-module> 

और ऊपर उल्लिखित समस्या के लिए एक काम कर JSBin यहां पाया जा सकता: http://jsbin.com/jumewuzuho/1/edit?html,console,output।

(प्रकाश डीओएम) सामग्री के परिवर्तन को कैप्चर करने के तरीके पर कोई सुझाव, ताकि मैं पाठ को फिर से बदल सकूं?

जैसा कि आप कोड के टिप्पणी ब्लॉक में देख सकते हैं, मैंने पहले से ही MutationObserver का उपयोग करने का प्रयास किया है, लेकिन एक कामकाजी प्रोटोटाइप बनाने में विफल रहा है। मेरा अनुमान है कि मैंने सही नोड (this.root मेरे मामले में) का उपयोग नहीं किया था।

Answer 1

मुझे नहीं लगता कि ObserveNodes (या MutationObserver) सबसे अच्छा तरीका यह दृष्टिकोण हैं है। ObserveNodes ट्रैक करता है जब नोड आपके तत्व से जोड़े और हटा दिए जाते हैं।

आपके मामले में, डोम नोड्स नहीं जोड़े या हटाए जा रहे हैं, यह केवल उस तत्व का आंतरिक पाठ है जो बदल रहा है। उन परिवर्तनों को ObserveNodes द्वारा उठाया नहीं जाता है।

मैं, एक और दृष्टिकोण है, जो मेरी राय में मामूली अधिक काम करने के बहुलक रास्ता के साथ गठबंधन किया है की सिफारिश करेंगे content टैग का उपयोग:,

अपने स्थानीय डोम के साथ एक तत्व के प्रकाश डोम की संरचना का समर्थन करने के पॉलिमर सामग्री तत्व का समर्थन करता है। content तत्व एक प्रविष्टि बिंदु है जिस पर एक तत्व के प्रकाश डोम

मैं एक सम्मिलन बिंदु बनाने और उसके बाद छाया डोम के माध्यम से यह शैली सामग्री टैग का प्रयोग करेंगे अपने स्थानीय डोम के साथ संयुक्त है प्रदान करता है (पाठ बदलने: अपरकेस):

<dom-module id="my-wrapper"> 
    <template> 
    <style> 
     :host { 
     text-transform: uppercase; 
     } 
    </style> 
    <content></content> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-wrapper' 
    }); 
    </script> 
</dom-module>