テンプレートがDOM要素を破棄しないようにする

Question

D3.js視覚化をMeteorアプリケーションに統合しようとしています。ページがロードされた後、D3関数は、使用可能なデータに基づいて、DOMエレメントをテンプレート内の<div>に挿入します。

しかし、ページのどこにでもリアクティブな更新がある場合、MeteorはD3.js関数によって挿入されたテンプレートの内容をダンプします。要素を再挿入することはできますが、これは望ましくないフリッカとパフォーマンスの低下を招きます。

このように外部から注入された要素がこのように落ち込むのを防ぐ方法はありますか？これらの要素は元々テンプレートの一部ではなかったので、私はそれを収集します。これらはMeteorの「クリーンアップ」プロセスの一環として破棄されます。

Answer 1

バージョン0.4.0でSparkテンプレートエンジンを導入したことで、この問題に対処する{{#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> 

....このようになるはずとJavaScriptは次のようになります...

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

D3注入要素（または少なくとも親要素）にユニークなIDを与えようとしましたか？ doc（http://docs.meteor.com/#livehtml）から：

フォーカス可能な要素のそれぞれに一意のIDがあるか、最も近い親内で一意の名前があることを確認してくださいidを持つ。 Meteorは、囲みテンプレートが再レンダリングされてもこれらの要素を保持しますが、子を更新して属性の変更をコピーします。