防止模板丢弃DOM元素

Question

我正在尝试将D3.js可视化集成到Meteor应用程序中.页面加载后,D3函数<div>根据可用数据将DOM元素注入到我的模板中.

然而,只要页面上的任何地方都存在被动更新,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.node 而不是 self.handle，但除此之外它应该相当简单。