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>

脚本标记永远不会执行，只会呈现标记。我不太确定这是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);
}

参考：

Twitter：https://dev.twitter.com/discussions/890
Facebook：https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

在流星模板中嵌入Javascript小部件

2 个答案: