4

I'm building my first Meteor app and am bumping into an issue embedding Javascript widgets.

So my app is basic single page landing page and I'm trying to embed the Twitter timeline widget with the following code...

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

The script tag is never executed and it only renders the a tag. I'm not quite sure if this is a Handlebars (the default template engine for Meteor) issue or Meteor issue as I'm relatively new to both frameworks.

4

2 回答 2

12

一般来说，当您构建 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");
}
于 2013-04-19T08:33:14.073 回答
9

尽管@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);
}

参考：

于 2013-05-28T21:49:36.183 回答