Twitter bootstrap Tweet共享按钮在登录/注销时不呈现

我正在一个应用程序上使用Meteor的

账户用户界面

软件包和

账户推特

，该应用程序包含数据库内容的缩略图。每个缩略图也有一个tweet共享按钮。我面临一个特殊的问题，当用户登录或注销应用程序时，tweet按钮不会呈现

在页面加载时，tweet按钮呈现良好，但当用户单击登录或注销时，元素或样式消失，只剩下文本

登录或注销时没有事件处理代码。我补充了要点

---

这与页面不刷新有关吗？以前是否注意到过这种行为？

尝试替换以使用渲染的

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脚本时会出现重新呈现的问题，这里有一个允许它运行多次的检查&只有当它的js被删除时才会执行操作

我怀疑重新呈现（注销/更改反应变量时）正在破坏js for twitter的api为该共享按钮创建的css链接。
twitter加载的js代码将tweet按钮转换为iFrame。我在inspector中查看生成的iframe，然后更改代码，从而避免了带有数据属性的锚标记，而是带有我在inspector中找到的URL的iframe标记。它也有一个模式，所以您应该能够制作一个模板，用不同的URL呈现不同的按钮

我认为现在这样做的问题是（我一开始也是这样做的）将tweet按钮转换为iframe的twitter代码只运行一次，即使您多次加载脚本。因此，如果您在twitter代码运行后创建一个tweet标记，它将不会转换为iframe，也不会工作或看起来像一个tweet按钮。
根据@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>

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");
}

结果很好
 只需在这里构建解决方案，您可以使用下面的进一步自定义您的可共享按钮

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()
    };
};

及

及


我已经成功地在没有“iframe”的情况下显示了twitter按钮，下面是如何做到的：
也不起作用。但是，
console.log（“呈现”）
在
Template.twitter.rendered中工作，在登录和注销时都可以使用
呈现。您是否可以使用chrome/webkit inspector检查twitter在登录前后添加的css，以及它在html中的哪个模板/位置放置它&如果它被移除，我查看chrome inspector并查看html是否是在模板。这意味着javascript不会在模板呈现上执行。此外，该应用程序已注册为localhost。不确定这是否会影响这种行为。我刚刚发现。Meteor有一个被调用的东西，元素围绕着
{{{constant}}
{{/constant}}
不重新渲染你可以这样做，但是里面没有反应变量吗？如果您说我检查了iframe元素并复制了HTML，并使用该模式加载不同的文本和url，那么它们将不会被解析。谢谢如果您仍在使用iframe，现在可以将twitter模板包装起来。这只会阻止它重新渲染。@Prashant很高兴我能帮上忙！我不使用{{#constant}}区域，因为Meteor的事件处理程序和帮助程序在常量区域内不工作。但是在其他情况下，正如您所提到的，
{{{{常量}}
没有多大帮助。只需像这样包装元素：
{{{常量}}
{{/常量}
。Meteor已停止渲染，执行此操作将阻止元素重新渲染
{{#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>