javascript - 在 Meteor 模板中嵌入 Javascript 小部件

Question

我正在构建我的第一个 Meteor应用程序，我遇到了嵌入 Javascript 小部件的问题。

所以我的应用程序是基本的单页登录页面，我正在尝试使用以下代码嵌入 Twitter 时间轴小部件...

<a class="twitter-timeline" href="https://twitter.com/abrudtkuhl" data-widget-id="325157935250546688">Tweets by @abrudtkuhl</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

script 标签永远不会执行，它只会呈现 a 标签。我不太确定这是不是 Handlebars (Meteor 的默认模板引擎) 问题或 Meteor 问题，因为我对这两个框架都比较陌生。

Answer 1

一般来说，在构建 Meteor 应用程序时，您希望将 Javascript 与模板分开。试试这个:

我假设 <a class="twitter-timeline"...在名为“twitter”的模板中(例如 <template name="twitter">。将您的 javascript 放入名为 twitter.js 的文件中，并在呈现模板后调用。

Template.twitter.rendered = function () {
  ! function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (!d.getElementById(id)) {
      js = d.createElement(s);
      js.id = id;
      js.src = "//platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js, fjs);
    }
  }(document, "script", "twitter-wjs");
}