Facebook按钮不适用于Iron-Router

Facebook button does not work with Iron-Router

本文关键字:Iron-Router 适用于 不适用 按钮 Facebook      更新时间:2023-09-26

我有一条路线

this.route('blabla', {
  template: 'FacebookLikeButton'
});

带有脸书按钮代码的模板

<template name="FacebookLikeButton">
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.con/mywebsite"       data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

当我直接转到localhost:3000/blabla时,将显示该按钮。但是当我做Router.go('blabla')时,按钮没有显示。使用 DOM 检查器,我可以看到 Facebook 标签在这里,脚本已执行,但由于某种原因,按钮没有显示。如果您刷新页面,则会这样做。

我该如何解决这个问题?

这修复了它:

Template.FacebookLikeButton.rendered = function() {
 try {
    FB.XFBML.parse();
 }catch(e) {}   
};

我得到了你想要的功能来在这个Meteorpad上工作。

它基本上是这样工作的:

主模板有一个按钮,该按钮使用 Router.go('blahblah') 转到下一个模板,并且它会正确呈现。

因此,您的模板如下所示:

<template name="home">
  <button class="test">Go to fb</button>
</template>
<template name="FacebookLikeButton">
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.con/mywebsite"       data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</template>

路线:

Router.route('/', {
  template: 'home'
});
Router.route('blahblah', {
  template: 'FacebookLikeButton'
});

客户端 JS:

Template.home.events({
  'click .test' : function(e, tpl) {
    Router.go('blahblah'); 
  }
});