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>

但在淘汰赛的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以查找需要转换为小部件的元素。由于您在组件中动态加载元素，因此在twitter javascript完成之前，它实际上并不存在于DOM中。

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

示例：jsFiddle

Answer 2

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

你可以做的是编写一个自定义绑定，它运行一个元素的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>

如何在淘汰赛js组件中添加推特跟随按钮？

2 个答案: