Wie füge ich eine Twitter-Follow-Schaltfläche innerhalb einer KO-Komponente hinzu?

Ich verwende knockout.js Komponenten für meine Website. Ich möchte einen Twitter-Follow-Button in einer meiner Komponenten hinzufügen. Wie Sie vielleicht wissen, stellt twitter ein Snippet zur Verfügung, das dies mithilfe eines Skripts tun kann.Wie füge ich eine Twitter-Follow-Schaltfläche innerhalb einer KO-Komponente hinzu?

<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>

Dieser Code-Schnipsel sollte den Twitter Follow Button mit einem iframe und anderen Dingen hinzufügen, dass der Widgets Skript tut.

Dies funktioniert gut außerhalb einer Komponente. Beispiel:

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

Aber innerhalb einer Komponente js Knockout, funktioniert es nicht:

ZB:

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

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

Kann mir jemand helfen, einen Weg finden, um erfolgreich eine Folgetaste in hinzufügen eine solche Komponente?

Hinweis: Ich benutze auch require.js und Schluck. Facebook-Like-Button ist in Ordnung.

Quelle

2017-02-13 Vishnu Narang

Das Twitter-Widget javascript scannt nach dem Laden sofort das DOM, um nach Elementen zu suchen, die in Widgets umgewandelt werden müssen. Da Sie das Element dynamisch in einer Komponente laden, existiert es erst im DOM, nachdem das Twitter-Javascript bereits beendet wurde.

Um dies zu umgehen, können Sie das Widget zwingen, das dom erneut zu scannen, indem Sie twttr.widgets.load() aus der Ansichtsmodellfunktion Ihrer Komponente aufrufen. Reference

Probe: jsFiddle

Quelle

2017-02-13 18:48:20

Dank. Das hat funktioniert. –

Es funktioniert nicht, weil das Profil Markup dynamisch eingesetzt ist und das a Element in dem DOM nicht vorhanden, wenn der Mail-Widget Skript geladen wird.

Sie können eine benutzerdefinierte Bindung schreiben, die eine Twitter-Initialisierungsfunktion für ein Element ausführt. Werfen Sie einen Blick auf diese Schnipsel:

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>

Quelle

2017-02-14 18:05:50

Danke. Dies scheint eine gute Verwendung des Bindungshandlers zu sein. –

Wie füge ich eine Twitter-Follow-Schaltfläche innerhalb einer KO-Komponente hinzu?

Antwort

Verwandte Themen