バージョン 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 を使用しなければならないこともありましたが、それ以外はかなり簡単です。