2016-03-23 6 views
5

मैं कस्टम तत्वों को घोंसला कर रहा हूं। मैं अपने मूल कस्टम तत्व के प्रोटोटाइप से अपने माता-पिता कस्टम तत्व का उपयोग विधियों और गुणों को प्राप्त करना चाहता हूं। जैसेकस्टम तत्व * और उसके बच्चों * को कॉलबैक कैसे प्राप्त किया गया है

<script>  
var ChildElement = Object.create(HTMLElement.prototype); 

ChildElement.getName = function() { 
    return "Bob"; 
} 

document.registerElement("child-element", { 
    prototype: ChildElement 
}); 

var ParentElement = Object.create(HTMLElement.prototype); 

ParentElement.createdCallback = function() { 
    var self = this; 
    setTimeout(function() { 
    // This logs 'Bob', correctly 
    console.log(self.childNodes[0].getName()); 
    }, 0); 

    // This explodes - getName is not defined. 
    console.log(self.childNodes[0].getName()); 
}; 

document.registerElement("parent-element", { 
    prototype: ParentElement 
}); 
</script> 

<parent-element><child-element></child-element></parent-element> 

विख्यात इनलाइन के रूप में, माता-पिता कुछ भी है कि बच्चे के तत्व के प्रोटोटाइप पर परिभाषित किया है नहीं पढ़ सकते हैं। यह अगर यह तत्काल सेटटाइमआउट हालांकि आग लग सकता है; इसे तब तक इंतजार करने की ज़रूरत है जब तक कि इस तत्व के बच्चे नोड्स भी स्थापित नहीं किए जाते।

यह इस तत्व निर्माण है, जो मुझे लगता है कि के दौरान कॉलबैक आदेश की वजह से होता दिखाई देता है कुछ की तरह है: माता पिता के प्रोटोटाइप

  • (ParentElement को HTMLElement से) सेट कर दिया जाता
  • माता पिता की createdCallback
  • कहा जाता है
  • माता पिता की attachedCallback कहा जाता है
  • बच्चे के प्रोटोटाइप (HTMLElement से ChildElement करने के लिए) के लिए निर्धारित है
  • बच्चे की createdCallback कैलोरी है नेतृत्व
  • बच्चे की attachedCallback

इस बिंदु पर createdCallback आग समझ में आता है कि कहा जाता है, लेकिन जहाँ तक मैं बता सकता हूँ वहाँ सब कि आग में कोई कॉलबैक उपलब्ध है जब आपके सभी बच्चों के लिए बनाया गया है। मुझे लगता है कि इसका मतलब है कि सृजन पर कुछ भी करना असंभव है जो आपके बच्चे के तत्वों के प्रोटोटाइप का उपयोग करता है, बिना सेटटाइमआउट का उपयोग किए पूरे पृष्ठ को प्रतिपादन समाप्त करने के लिए प्रतीक्षा करें।

क्या कोई कॉलबैक या घटनाएं हैं जिन्हें आप माता-पिता से सुन सकते हैं, केवल आपके ट्रिगर नोड्स के प्रोटोटाइप को सेट करने के बाद ही ट्रिगर करने के लिए? क्या कोई अलग दृष्टिकोण है जो आपको इस तरह की संरचनाओं का उपयोग करने की अनुमति देगा? क्या कोई और चीज है जो आप सेटटाइम ट्रिगर करने के अलावा कर सकते हैं?

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

तर्कसंगत रूप से इसे Prototype not defined when accessing children on creation of custom-tag का डुप्लिकेट माना जा सकता है। हालांकि, यह प्रश्न खराब वाक्यांशों के साथ खराब वाक्यांश है, और एकमात्र उत्तर वास्तव में कार्यान्वयन बग प्रतीत होता है, समाधान नहीं (या कम से कम, यह अब वर्तमान ब्राउज़र व्यवहार नहीं है)

उत्तर

3

असल में, कई अलग-अलग तरीके हैं नेस्टेड कस्टम तत्वों के साथ इसे प्राप्त करने के लिए।

ParentElement.childAttachedCallback = function() 
{ 
    console.log(this.childNodes[0].getName()) 
} 

ChildElement.attachedCallback = function() 
{ 
    this.parentElement.childAttachedCallback() 
} 

एक जटिल परिदृश्य में आप के बजाय इस्तेमाल कर सकते हैं:

    सीधा रास्ता पेरेंट तत्व है कि इसकी attachedCallback विधि से चाइल्ड तत्व द्वारा बुलाया जाएगा करने के लिए एक कस्टम कॉलबैक जोड़ने के लिए है

  • एक Promise वस्तु माता-पिता द्वारा निर्धारित और एक या अधिक बच्चे द्वारा हल,
  • कस्टम बच्चे द्वारा चलाई और माता पिता के द्वारा पकड़ा घटनाक्रम,
  • MutationObserver ऑब्जेक्ट पैरेंट की बाल सूची में परिवर्तनों को देखने के लिए सेट है ...
संबंधित मुद्दे