7

Meteor アプリに addthis 共有ボタンを挿入するにはどうすればよいですか? 通常、提供されたコードを html ファイルに直接コピーするだけです。

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=silencing"></script>
<!-- AddThis Button END -->

しかし Meteor では、ボタンは表示されません。リンクが DOM から消えているようです。完全な Meteor アプリは次のとおりです (.js ファイルと .css ファイルは空白です)。

<head>
   <title>test-addthis</title>
</head>

<body>
    <!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style ">
    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    <a class="addthis_button_tweet"></a>
    <a class="addthis_button_pinterest_pinit"></a>
    <a class="addthis_counter addthis_pill_style"></a>
    </div>
    <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=silencing"></script>
    <!-- AddThis Button END -->
</body>

そして、ここに問題を示すライブバージョンがあります: http://testaddthismeteor.meteor.com/

4

4 に答える 4

5

Meteor テンプレートの body タグは、実際には HTML の body タグではありません。これは、アプリケーションの「本体」にすぎません。

そのため、Meteor がアプリをロードすると、ブラウザー自体でページをレンダリングするための HTML 要素が生成され、適用可能なテンプレートがあればレンダリングされます。あなたのケースでは、script タグを含むテンプレートがあり、標準の HTML ドキュメントと同様に、ブラウザが先に進み、関連付けられた Javascript を実行すると想定しています。しかし、それはそれがどのように機能するかではありません。Javascript は実行されておらず、DOM ノードが DOM 構造に追加されているだけです。

の値をログに記録することで、これをテストできますaddthis_config。未定義になります。含めようとした addthis スクリプトも、Web インスペクターの [リソース] タブが示すように、ブラウザーによって取得されませんでした。

これを修正するには、Meteor に外部スクリプトを取得してから変数を設定するように指示する必要があります。テンプレートの<head>要素に、スクリプトを追加します。

  <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=silencing"></script>

次に、Javascript で変数を宣言します。

  if (Meteor.isClient) {
    var addthis_config = {"data_track_addressbar": true};
  }
于 2012-12-22T12:51:20.150 に答える
2

上記の優れた回答に加えて、外部コードが依存する DOM の任意の部分を保護する必要もあります。そうしないと、Meteor がそれを書き換える可能性があります。あなたはそれを囲むことによってそれを行います

{{#constant}}
    <!-- protected DOM -->     
{{/constant}}

こことここですべて説明

于 2012-12-24T10:56:48.630 に答える
1

アプリがMeteor.routerパッケージを使用している場合、および/またはアプリで別のページを表示している場合、Rahulの優れた回答に加えて、新しいページに切り替えるたびに共有ボタンを更新する必要がありますページ。

これを行うには、this を JavaScript API として追加して、ボタンとツールボックスをレンダリングします ( http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#rendering-js ) 。

ページのメイン テンプレート (ページを切り替えると変化するテンプレート) で、テンプレートがレンダリングされるときに呼び出されるレンダリング ヘルパーを実装します。

Template.mypage.rendered = function() {
    // in this case we render a toolbox
    addthis.toolbox(".addthis_toolbox");
}
于 2013-05-30T18:33:43.717 に答える