Question

我在一个应用程序中使用Meteor的accounts-ui包和accounts-twitter包，该应用程序包含来自数据库内容的缩略图。每个缩略图还有一个推文分享按钮。我面临一个特殊的问题，当用户登录或退出应用程序时，推文按钮不会呈现。

在页面加载时，推文按钮渲染得很好，但是当用户点击登录或注销时，元素消失或样式消失并且仅留下文本。

登录或注销时没有事件处理代码。我添加了要点here。

是否与页面没有刷新有关？之前是否已注意到此行为？

Answer 1

twitter加载的js代码将推文按钮转换为iframe。我通过查看检查器中生成的iframe然后更改我的代码而不是带有数据属性的锚标记来解决这个问题，这里有一个iframe标记，其中包含我在检查器中找到的URL。它也有一个模式，所以你应该能够制作一个模板，用不同的网址呈现不同的按钮。

我认为现在这样做的问题（这也是我最初做的方式）是将推文按钮转换为iframe的推特代码只运行一次，即使你加载了脚本多次。因此，如果您在推特代码已经运行后创建推文标签，它将不会转换为iframe，也不会起作用或看起来像推文按钮。

Answer 2

尝试替换以使用rendered

Template.twitter.rendered = function() {
  return !function(d,s,id) {
           var js,fjs = d.getElementsByTagName(s)[0];
           if(!d.getElementById(id)){
             js=d.createElement(s);
             js.id=id;
             js.src="http://platform.twitter.com/widgets.js";
             fjs.parentNode.insertBefore(js,fjs);
           }
   }(document,"script","twitter-wjs");
}

不要担心重新渲染多次添加twitter的api脚本有一个检查，允许它运行多次＆amp;只有在移除了js时才会行动。

我怀疑重新渲染（在注销/更改反应变量的同时）正在破坏js为该分享按钮的twitter的api创建的css的链接。

Answer 3

根据@ zorlak的回答，这就是我所做的：

<强> HTML ：

<template name="listings">
  {{twitter "@MeteorAtSO"}}
</template>


<template name="twitter">
  <iframe allowtransparency="true" frameborder="0" scrolling="no" 
     src="http://platform.twitter.com/widgets/tweet_button.1362636220.html#_=1363023601135&amp;
       count=none&amp;id=twitter-widget-0&amp;
       lang=en&amp;original_referer=http://localhost:3000&amp;
       text=Check out {{this}}!&amp;
       url=http://localhost:3000"&amp;size=m 
     class="twitter-share-button twitter-count-none" 
     style="width: 58px; height: 20px;" 
     title="Twitter Tweet Button" 
     data-twttr-rendered="true">
  </iframe>
</template>

<强>的Javascript ：

Template.twitter.rendered = function() {
  return !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 4

只需在此处构建解决方案，您可以使用以下内容进一步自定义可共享按钮

Template.listings.twitterDetails = function() {
    return {
        text: "What do you want to say?"
        , url: "what link do you want to share?"
        , referer: "yoursite.com"
        , id: Random.id()
    };
};

和

{{#with twitterDetails}}
    {{>twitter}}
{{/with}}

和

<template name="twitter">
  <iframe allowtransparency="true" frameborder="0" scrolling="no" 
    src="http://platform.twitter.com/widgets/tweet_button.{{id}}.html#_={{id}}&count=none&id=twitter-widget-0&lang=en&original_referer={{referer}}&text={{text}}&url={{url}}&size=l"
     class="twitter-share-button twitter-count-none" 
     style="width: 77px; height: 28px;" 
     title="Twitter Tweet Button" 
     data-twttr-rendered="true">
  </iframe>
</template>

Answer 5

我设法显示没有'iframe'的twitter按钮，方法如下：../twitter-buttons-in-meteor.html

在登录/注销时不会呈现推文分享按钮

5 个答案: