如何在 knockout js 组件中添加 twitter 关注按钮？

Question

我正在为我的网站使用 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>

但是在knockout js组件里面，不行：

例如：

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

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

谁能帮我想办法在这样的组件中成功添加关注按钮？

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

Answer 1

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

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

样本：jsFiddle

Answer 2

它不起作用，因为配置文件标记是动态插入的，并且在加载 Twitter 小部件脚本时 a 元素不存在于 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>

如何在 knockout js 组件中添加 twitter 关注按钮？

How to add a twitter follow button inside a knockout js component?

javascript

twitter

knockout.js

custom-component

knockout-components