如何在knockout js組件中添加twitter按鈕？

我正在爲我的網站使用knockout.js組件。我想在我的一個組件中添加一個twitter按鈕。正如你可能知道的，twitter提供了一個可以使用腳本來做到的片段。如何在knockout js組件中添加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像按鈕呈現罰款。

來源

2017-02-13 Vishnu Narang

嘰嘰喳喳小部件的JavaScript，一旦加載，立即掃描DOM以查找需要變成小部件的元素。由於您要在組件中動態加載元素，因此它在JavaScript中尚未實際存在，直到twitter已完成。

要解決這個問題，您可以通過從組件的視圖模型函數中調用twttr.widgets.load()來強制widget再次掃描dom。 Reference

樣品：jsFiddle

來源

2017-02-13 18:48:20

感謝。這工作。 –

它不工作，因爲外形標記動態插入和被加載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>

來源

2017-02-14 18:05:50

謝謝。這似乎是綁定處理程序的一個很好的用法。 –

如何在knockout js組件中添加twitter按鈕？

回答

相關問題