防止模板丢弃 DOM 元素答案

【问题标题】：Prevent Templates From Discarding DOM Elements防止模板丢弃 DOM 元素
【发布时间】：2014-01-16 16:58:55
【问题描述】：

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

然而，只要页面上的任何地方有响应式更新，Meteor 就会转储由我的 D3.js 函数注入的模板内容。我可以重新插入元素，但这会导致不希望的闪烁和性能下降。

关于如何抑制这种外部注入元素的丢弃有什么想法吗？我收集到，由于这些元素最初不是模板的一部分，因此它们作为 Meteor 的“清理”过程的一部分被丢弃。

【问题讨论】：

我们需要添加一个很好的方法来保存以编程方式嵌入的元素。问题是，当一个模板被重新渲染时，它会用它渲染到的任何内容替换 DOM 中的任何内容——它不知道通过其他方式添加了哪些元素。
@dgreensp - 这是一个功能，而不是一个缺陷。 ;)

标签： d3.js meteor

【解决方案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，但否则它应该相当简单。

【讨论】：

【解决方案2】：

您是否尝试过为 D3 注入的元素（或至少是父元素）赋予唯一的 ID？来自文档 (http://docs.meteor.com/#livehtml)：

只需确保您的每个可聚焦元素都具有唯一的 id，或者在具有 id 的最近的父级中具有唯一的名称。 Meteor 将保留这些元素，即使它们的封闭模板被重新渲染，但仍会更新它们的子元素并复制任何属性更改。

【讨论】：

我同意文档似乎暗示将唯一 ID 附加到元素会阻止它被删除，但情况似乎并非如此。在我的应用程序中，插入的每个元素都有一个唯一的 ID，但它们在响应式更新时被删除了。