6

我试图在Meteor 应用程序中包含 Google Plus One 按钮以进行协作草图绘制，但我注意到script模板内的标签未执行。

<template name="gplus">
    <!-- Place this tag where you want the +1 button to render. -->
    <div class="g-plusone" data-href="{{url}}"></div>

    <!-- Place this tag after the last +1 button tag. -->
    <script type="text/javascript">
        console.log("Google Plus button");
        (function() {
            var po = document.createElement('script');
            po.type = 'text/javascript';
            po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(po, s);
        })();
    </script>
</template>

我通过将脚本移动到单独的 JavaScript 文件来使按钮工作，但我仍然想知道为什么内联脚本不起作用。

我在控制台上看到了脚本标签，但脚本本身没有运行。Meteor 是如何做到这一点的？

4

2 回答 2

4

Meteor 只是将 gplus 模板的内容插入到 DOM 中，所以当然不会发生任何事情，因为在将元素添加到 DOM 时没有脚本执行。

要解决此问题，您可以创建一个 .js 文件并将其放在客户端文件夹中，Meteor 将自动包含并为您执行（以及在生产中缩小）。

于 2013-04-15T15:01:18.130 回答
2

Here is what I do to load the Google +1 Button in my application:

1. Add the JS library between the <head> tag of your application.

<head>
  <!-- Load JS Library -->
  <script src="https://apis.google.com/js/platform.js" async="async" defer="defer"></script>
</head>

2. Insert the +1 Button.

<template name="myTemplate">
  <div data-href="https://hackisition.com/" data-size="medium" class="g-plusone"></div>
</template>

3. Render the Button.

Template.myTemplate.rendered = function() {
  return gapi.plusone.go();
};
于 2014-08-22T09:22:28.447 回答