Question

我一直试图在Meteor / Telescope（telesc.pe）应用程序中包含静态HTML + JavaScript，并且无法使用Blaze。

为了创建一个比我原来更简单的案例，我尝试在via Meteor中插入一个简单的HTML + javascript代码块（非常基本的D3.js可视化创建一个圆圈），如下所示。此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>

我一直把它作为未转义的标签包含在Meteor中。 e.g。

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

上面代码段内的HTML正确呈现（文字Circle和/ Circle），但它似乎没有尝试加载我包含的任何javascript元素。

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

非常感谢任何有关如何使这项工作的帮助！

Answer 1

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

也就是说，实现你想做的事情很容易。首先，走这一行：

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

并将其放在<head>文件的index.html内，或将HTML文件作为应用的入口点。

接下来，获取内联script块中的代码，并将其放入模板的rendered回调中：

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");});
};

它将在模板呈现到DOM后执行，如您所愿。为了提高性能，您可以考虑将d3.select替换为this.find或this.findAll中的rendered，以将DOM搜索限制为仅模板上下文。请参阅http://docs.meteor.com/#/full/template_find。

如果您直接从数据库处理可怕的HTML块，那么样本中包含<script>标记，您需要先将其解析为字符串。使用正则表达式查找第一个src标记的script（我会让你找到关于如何做的许多其他SO答案）并使用jQuery的$.getScript加载该脚本动态。使用另一个正则表达式来提取内联脚本块，并将其作为回调传递给$.getScript。尽管我讨厌说，但你必须使用eval：

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

在Meteor / Blaze中渲染静态HTML

1 个答案: