डीओएम तत्वों को हटाने से टेम्पलेट्स को रोकें

Question

मैं एक उल्का ऐप में D3.js विज़ुअलाइज़ेशन को एकीकृत करने का प्रयास कर रहा हूं। पृष्ठ लोड होने के बाद, एक डी 3 फ़ंक्शन उपलब्ध डेटा के आधार पर मेरे टेम्पलेट में <div> में DOM तत्वों को इंजेक्ट करता है।

जब भी पृष्ठ पर कहीं भी एक प्रतिक्रियाशील अद्यतन होता है, हालांकि, उल्का टेम्पलेट की सामग्री को डंप करता है जो मेरे D3.js फ़ंक्शन द्वारा इंजेक्शन दिया गया था। मैं तत्वों को फिर से सम्मिलित कर सकता हूं, लेकिन इससे एक अवांछित झिलमिलाहट और प्रदर्शन में कमी आती है।

बाहरी इंजेक्शन तत्वों के इस ड्रॉप को दबाने के तरीके पर कोई विचार? मैं इकट्ठा करता हूं क्योंकि चूंकि ये तत्व मूल रूप से टेम्पलेट का हिस्सा नहीं थे, इसलिए उन्हें उल्का की 'सफाई' प्रक्रिया के हिस्से के रूप में त्याग दिया जाता है।

Answer 1

संस्करण 0.4.0 में स्पार्क टेम्पलेटिंग इंजन की शुरूआत के साथ, उन्होंने इस समस्या को हल करने के लिए {{#constant}} ब्लॉक सहायकों की शुरुआत की है।

http://meteor.com/blog/2012/08/31/introducing-spark-a-new-live-page-update-engine कभी कभी

अपने HTML टेम्पलेट कुछ इस तरह दिखना चाहिए ....

<template name="samplePageTemplate"> 
    <div id="samplePage" class="page"> 
     {{#constant}} 
     <div id="sampleGraph"></div> 
     {{/constant}} 
    </div> 
</template> 

और जावास्क्रिप्ट कुछ इस तरह देखना चाहिए ...

Template.samplePageTemplate.destroyed = function() { 
    this.handle && this.handle.stop(); 
}; 
Template.samplePageTemplate.rendered = function() { 
    self.node = self.find("svg"); 
    if (!self.handle) { 
     self.handle = Meteor.autorun(function(){ 

      $('#sampleGraph').html(''); 
      renderChart(); 

     }); 
    }; 
}; 

function renderChart(){ 

    // lots of d3 chart specific stuff 

    var vis = d3.select("#sampleGraph").append("svg:svg") 
     .attr("width", window.innerWidth) 
     .attr("height", window.innerHeight) 
     .append("svg:g") 
     .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 

    // more d3 chart specific stuff 

    }); 
}; 

मैंने self.handle के बजाय self.node का उपयोग करना पड़ा, लेकिन अन्यथा यह काफी सीधे आगे होना चाहिए।

Answer 2

क्या आपने डी 3 इंजेक्शन तत्वों (या कम से कम एक मूल तत्व) को अद्वितीय आईडी देने का प्रयास किया है? दस्तावेज़ से (http://docs.meteor.com/#livehtml):

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