在Meteor/Blaze中呈现静态HTML

我一直在尝试在Meteor/Telescope telesc.pe应用程序中包含静态HTML+JavaScript，但无法使用Blaze

为了创建一个比我原来的更简单的例子，我尝试插入一个简单的HTML+javascript代码块非常基本的D3.js可视化，它在下面的via Meteor中创建了一个圆圈。此HTML块存储在MongoDB的集合中，并使用下面的模板进行访问

<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.2.js"></script>
  <h1>Circle</h1>
    <div id="viz"></div>
  <h1>/Circle</h1>
    <script type="text/javascript">

    var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 100)
        .attr("height", 100);

    sampleSVG.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");});

    </script>

我一直把它作为一个未被替换的标签放在《流星》中。e、 g

<template name="post_body">
  {{{ htmlBody }}}
</template>

上面代码段中的HTML正确地呈现了文本圆圈和/圆圈，但它似乎没有尝试加载我包含的任何javascript元素

我完全知道，这不是将可视化加载到Meteor应用程序中的最佳方式，但很可能需要这样做，因为我使用的更复杂的可视化是使用外部应用程序静态生成的

任何关于如何使这项工作的帮助将不胜感激

您不能在Meteor模板中使用标记。Meteor解析您的模板，将其作为DOM对象呈现到DOM中，并且不执行任何内联JavaScript

也就是说，实现你想要做的事情很容易。首先，以这条线为例：

<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.2.js"></script>

它将在模板被呈现到DOM中后执行，这是您想要的。为了提高性能，您可以考虑在渲染中使用this.find或this.findAll替换d3.select，以将DOM搜索仅限于模板上下文。看

如果直接从数据库中处理一个糟糕的HTML块，其中包含示例中的标记，那么首先需要将其解析为字符串。使用正则表达式来查找第一个脚本标记的src，我将让您找到关于如何执行该操作的许多其他SO答案，并使用jQuery的$.getScript动态加载该脚本。使用另一个正则表达式拉出内联脚本块，并将其作为回调传递给$.getScript。虽然我很不喜欢说，但你必须使用eval：

Template.post_body.rendered = function() {
    var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 100)
        .attr("height", 100);

    sampleSVG.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");});
};

Template.post_body.rendered = function() {
    $.getScript(urlThatYouParsed, function() { eval(codeThatYouParsed); });
};