मेरे पास 2 लिट-एलिमेंट घटक हैं। मूल सामग्री है:

<s-sortablelist>
${this.renderChildren()}
</s-sortablelist>

renderChildren फ़ंक्शन एक सरणी गुण children = [1, 2] पर लूप कर रहा है और <div> तत्व बना रहा है। प्रस्तुत पृष्ठ कुछ ऐसा हो सकता है:

<s-sortablelist>
  <div id="1"></div>
  <div id="2"></div>
</s-sortablelist>

सॉर्टेबललिस्ट घटक उपयोगकर्ता को ड्रैग एंड ड्रॉप का उपयोग करके <div> टैग को पुन: व्यवस्थित करने की अनुमति देता है। डीएनडी के बाद, रेंडर किया गया लेआउट बन सकता है (2 और 1 को वापस कर दिया जाता है):

<s-sortablelist>
  <div id="2"></div>
  <div id="1"></div>
</s-sortablelist>

उपयोगकर्ता द्वारा आदेश बदलने के बाद, यदि मैं संपत्ति children=[3,4] बदलता हूं, तो परिणाम मेरी अपेक्षाओं से भिन्न होता है:

  • मैं बच्चों के साथ एक नई सूची देखने की उम्मीद कर रहा हूँ ३,४
  • मैं पहले किए गए डीएनडी संचालन के आधार पर 3,4 और कुछ अन्य तत्वों (1, 2) के साथ एक सूची देख रहा हूं

तो मेरा सवाल यह है कि इसे कैसे काम करना चाहिए? यदि बच्चों की सरणी बदल जाती है, क्योंकि यह एक संपत्ति है, तो मूल घटक प्रस्तुत करेगा।

मैं उम्मीद कर रहा हूं कि sotablelist घटक को फिर से प्रस्तुत किया जाएगा, लेकिन मेरे पिछले रेंडर से अतिरिक्त बच्चे क्यों होंगे?

2
Omar BELKHODJA 14 जिंदा 2020, 11:14

1 उत्तर

सबसे बढ़िया उत्तर

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

ऐसा करने का सही तरीका ड्रैग एंड ड्रॉप ऑपरेशन में नोड्स को स्थानांतरित नहीं करना है, लेकिन इससे पहले कि आप वास्तव में डीओएम को बदल दें, इसके बजाय उस डेटा को बदलें जो डीओएम प्रदान करता है। फिर लिट-एचटीएमएल नए आदेश पर सूची प्रस्तुत कर सकता है, लेकिन सभी टिप्पणी नोड और अन्य आंतरिक डेटा को सिंक में रखें।

6
Justin Fagnani 14 जिंदा 2020, 16:52