在流星模板中嵌入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>

脚本标记永远不会执行,只会呈现标记.我不太确定这是否是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(它已经存在),并且不会再次调用它的初始化.

大多数社交窗口小部件都是如此,您需要手动强制这些窗口小部件重新解析页面.这不仅仅是一个流星问题,而且对于任何加载包含小部件的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/