Impedir plantillas para descartar elementos DOM

Question

Estoy intentando integrar una visualización D3.js en una aplicación Meteor. Después de que la página se haya cargado, una función D3 inyecta elementos DOM en un <div> en mi plantilla, según los datos disponibles.

Siempre que haya una actualización reactiva en cualquier lugar de la página, sin embargo, Meteor volcará el contenido de la plantilla que fue inyectada por mi función D3.js. Puedo volver a insertar los elementos, pero esto conduce a un parpadeo no deseado y una disminución en el rendimiento.

¿Alguna idea sobre cómo suprimir esta caída de elementos inyectados externamente? Deduzco que, dado que estos elementos no formaban parte de la plantilla originalmente, se descartan como parte del proceso de "limpieza" de Meteor.

Answer 1

Con la introducción del motor de plantillas Spark en la versión 0.4.0, han introducido los {{#constant}} asistentes de bloques para solucionar este problema.

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

la plantilla HTML debería ser algo como esto ....

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

Y el javascript debe ser algo como esto ...

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 

    }); 
}; 

a veces he tuvo que usar self.node en lugar de self.handle, pero de lo contrario debería ser bastante directo.

Answer 2

¿Ha intentado dar identificadores únicos a los elementos inyectados D3 (o al menos un elemento principal)? Desde el documento (http://docs.meteor.com/#livehtml):

Solo asegúrese de que cada uno de sus elementos enfocables tenga una identificación única o un nombre único dentro de la matriz más cercana que tiene una identificación. Meteor conservará estos elementos incluso cuando se reintegre su plantilla adjunta, pero aún actualizará sus hijos y copiará los cambios de cualquier atributo.