2013-01-22 28 views
6

का उपयोग कर HTML तत्वों को मिरर करना, मैं पृष्ठ पर कई स्थानों पर "समान" HTML तत्व प्रस्तुत करना चाहता हूं। यह तत्व स्क्रिप्ट/एनिमेटेड है और विभिन्न प्रस्तुतिकरणों को सिंक में रहने की आवश्यकता है।संभावित रूप से छाया DOM

समाधान मैं पर विचार किया है में शामिल हैं: कई स्थानों में तत्व की

  1. रखें प्रतियां और उन सभी को अपडेट करें। यही वह है जिसे मैं टालने की कोशिश कर रहा हूं।
  2. एकाधिक स्थानों में तत्व की प्रतियां रखें। प्रतियों में से एक को अपडेट करें, और उन परिवर्तनों को कैप्चर करने के लिए उत्परिवर्तन घटनाओं का उपयोग करें और उन्हें अन्य प्रतियों के विरुद्ध दोबारा दोहराएं। बहुत सारे काम की तरह लगता है।
  3. छाया डोम का उपयोग करें। मुझे इस विकल्प के लिए बहुत उम्मीद थी, जो शुरू में "सम्मिलन बिंदु" का उपयोग करके संभवतः प्रतीत होता है, जो यहां पर एक डोम सबट्री को लगभग एक डोम उपट्री में रखा जा सकता है।

मैंने इस अंतिम विकल्प का परीक्षण नहीं किया है, जो available in Chrome 25 है। W3C spec का कहना है:

ही एक मामला है कि विशेष विचार हकदार स्थिति एक सम्मिलन बिंदु एक और छाया मेजबान का एक बच्चा नोड ... का असर एक नोड की जा रही एक से अधिक सम्मिलन बिंदु में वितरित होता है जब है को पुन: प्रक्षेपण कहा जाता है।

लेकिन फिर ...

पुनः प्रक्षेपण के दौरान एक से अधिक सम्मिलन बिंदु को वितरित किया जाने के बावजूद इस एक नोड अभी भी केवल एक बार, क्योंकि की कमी है जिसके तहत प्रक्षेपण होने के प्रदान की गई है : चूंकि सम्मिलन अंक केवल शैडो होस्ट के बच्चे हैं, जब वे कभी भी प्रस्तुत नहीं किए जाते हैं, तो केवल उन्मूलन के अधीन होते हैं। इसके बजाय छाया पेड़ उनके स्थान पर प्रदान किया गया है।

क्या ऐसा लगता है कि छाया डोम जो मैं चाहता हूं वह करने की संभावना है और परीक्षण के लायक है, या क्या कोई अन्य अनुशंसित दृष्टिकोण है?

उत्तर

6

छाया डोम प्रक्षेपण जो भी आप चाहते हैं वह नहीं करता है।

मैं क्रोम में छाया डोम को लागू करने वाली टीम का हिस्सा हूं। स्पेक्ट्रम में टिप्पणी एक बार में एक बार छाया डीओएम में सही सामग्री प्रदान की जाती है।

फ़ायरफ़ॉक्स एक प्रायोगिक सुविधा का उपयोग कर background: -moz-element(#foo); जहां foo है जहां an element can be used as a background. यह सीएसएस में झुका रहा है:

यहाँ जो उपयोगी हो सकता है, तो आप वास्तव में क्या हासिल करने की कोशिश कर रहे हैं पर निर्भर करता है विचारों के एक जोड़े हैं उस तत्व की आईडी जिसे आप प्रतिलिपि बनाना चाहते हैं। छवि "लाइव" है; तत्व में परिवर्तन हर जगह परिलक्षित होते हैं, इसे पृष्ठभूमि के रूप में उपयोग किया जाता है।

-moz-element का उपयोग कुछ संभावित डाउनसाइड्स है: यह केवल फ़ायरफ़ॉक्स के कुछ संस्करणों में लागू किया गया है; यह प्रयोगात्मक है, जिसका अर्थ यह है कि सुविधा कुछ बिंदु पर बदल सकती है या दूर हो सकती है; और प्रतिलिपि इंटरैक्टिव नहीं है - आप वहां बटन पर क्लिक नहीं कर सकते हैं, प्रतिलिपि पर होवरिंग :hover शैलियों को ट्रिगर नहीं करता है, और इसी तरह।

यदि आप सभी प्रतियां इंटरैक्टिव होना चाहते हैं, तो उत्परिवर्तन पर्यवेक्षकों का उपयोग करें। a library called Mutation Summary है जो उत्परिवर्तन पर्यवेक्षकों को लपेटता है और इसमें an example Chrome extension शामिल है जो पूरे पृष्ठ को दर्पण करता है। आप इसे डोम के एक उप-दर्पण दर्पण के लिए अनुकूलित कर सकते हैं। आपके आवेदन के आधार पर आप डीओएम द्वि-दिशात्मक रूप से दर्पण करने के लिए उत्परिवर्तन पर्यवेक्षकों का भी उपयोग कर सकते हैं।

+0

तो यदि छाया डोम की सामग्री बदलती है, तो इसे फिर से प्रस्तुत नहीं किया जाता है? – Michael

+0

यदि छाया डोम की सामग्री इसे प्रस्तुत करती है। लेकिन छाया डोम समेत डोम के प्रतिपादन में, एक तत्व केवल एक उदाहरण में प्रस्तुत किया जाता है; सामग्री के कई एक साथ प्रस्तुतिकरण नहीं हैं। –

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^