在 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>

脚本标签永远不会被执行，它只会渲染 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");
}

Answer 2

虽然@emgee 的回答绝对正确，但在某些情况下这还不够。

当 JavaScript 只是插入一个新元素时，下次显示模板时，不会重新插入 JS（它已经存在）并且不会再次调用它的初始化。

大多数社交小部件都是如此，您需要手动强制这些小部件重新解析页面。这不仅仅是 Meteor 问题，对于任何在 AJAX 中加载包含小部件的内容的网站都是如此。

例如，对于 twitter 小部件，您需要调用 twttr.widgets.load(rootElement)。

例如，在pijs.io的主页上，要重新处理嵌入的推文和“关注”按钮，我有：

Template.home.rendered = function() {
  setTimeout(function() { 
    twttr.widgets.load(this.firstNode);;
    FB.XFBML.parse(this.firstNode);
  }, 0);
}

参考：

• 推特：https://dev.twitter.com/discussions/890
• 脸书：https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/