0

我正在为我的网站使用 knockout.js 组件。我想在我的一个组件中添加一个 twitter 关注按钮。您可能知道，twitter 提供了一个片段，可以使用脚本来完成。

<a href="https://twitter.com/vishnu_narang" class="twitter-follow-button" data-show-count="false">Follow
        @vishnu_narang</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

这个片段应该使用 iframe 和小部件脚本所做的其他事情来添加 twitter 关注按钮。

这在组件之外工作正常。例子：

<html>
  <body>
    // Snippet here will work as expected
  </body>
</html>

但是在淘汰赛 js 组件中，它不起作用：

例如：

<html>
  <body>
    <profile></profile>
  </body>
</html>

// Profile template will be
<div>
   //snippet for follow button here.
</div>

有人可以帮我找到在这样的组件中成功添加关注按钮的方法吗？

注意：我也在使用 require.js 和 gulp。Facebook like 按钮呈现良好。

4

2 回答 2

2

twitter 小部件 javascript 在加载后会立即扫描 DOM 以查找需要转换为小部件的元素。由于您在组件中动态加载元素，因此在 twitter javascript 完成之前，它实际上并不存在于 DOM 中。

twttr.widgets.load()为了解决这个问题，您可以通过从组件的视图模型函数调用来强制小部件再次扫描 dom 。参考

示例：jsFiddle

于 2017-02-13T18:48:20.993 回答
0

它不起作用，因为配置文件标记是动态插入的，并且a在加载 twitter 小部件脚本时该元素不存在于 DOM 中。

您可以做的是编写一个自定义绑定，它为一个元素运行一个 twitter 初始化函数。看看这个片段：

ko.components.register('profile', {
    viewModel: function() {
    },
    template:
        '<a href="https://twitter.com/TwitterDev" class="twitter-follow-button" data-show-count="true" data-bind="twitterWidget">Follow @vishnu_narang</a>'
});

ko.bindingHandlers.twitterWidget = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        twttr.widgets.load(element)
    }
};

ko.applyBindings({})
<html>
  <head>
    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

  </head>
  <body>
    <profile></profile>
  </body>
</html>

于 2017-02-14T18:05:50.147 回答