Dynamische Bindung von li Elemente klicken Ereignis

Question

Ich habe Durandal und Knockout Web-Anwendung. Ich habe eine html wie folgt:

<ul id="header"> 

</ul> 

In Js Funktion I li Hinzufügen bin dynamisch:

$("#header).append('<li id="btn"><a href="javascript://" data-bind="click:function(data,event) { $root.testmethod(data,event); return true;}"> <span class="name">Test</span></a></li>') 

ko.applyBindingsToNode(ul); 

Ich bin mir bewusst, dass ich das li nach applyBindings bin verbindlich genannt wurde . Um es dynamisch hinzuzufügen, verwende ich ko.applyBindingsToNode (ul); , aber immer noch kein Glück.

Kann mir bitte jemand sagen, was die Syntax/alternative Lösung dafür ist?

Answer 1

Ich möchte meine eigene Frage beantworten.

Die Lösung ist sehr einfach.

In der Js Datei definieren eine beobachtbare Array

self.arraysample = ko.observableArray([]); 

Bei einem Verfahren bevölkert das Array mit Daten

self.arraysample.push(data) 

in der HTML-Seite können wir dies tun:

<ul id="head" data-bind:"foeach:arraysample"> 

    <li> 
     <a id="btn"> 
     <span data-bind="text:$data.arrayelement"></span> 
     </a> 
    </li> 
</ul> 

Das ist, wenn die Daten in der "self.arraysample" ändert sich, automatische Aktualisierung findet statt wegen knockout js Eigenschaften.

Ich hoffe, es hilft jemandem, weil ich so viele Beispiele im Web gesehen habe, die ko.applyBindings() noch einmal verwenden, was überhaupt nicht funktioniert.

Answer 2

// beginnt ein JavaScript-Kommentar. Das bedeutet, dass alles nach <a href="javascript: wird kommentiert, und der resultierende Code wird wie folgt aussehen:

$("#header).append('<li id="btn"><a href="javascript: 
ko.applyBindingsToNode(ul); 

Darüber hinaus ist der ko.applyBindingsToNode Anruf wird ein Teil der ' Schnur geöffnet gerade nach dem Öffnungswinkel am append Anruf sein.

Um dies zu beheben, müssen Sie diese Kommentare zu entkommen, indem Schrägstriche vor ihnen platzieren:

href="javascript:\/\/" 

Answer 3

finden Sie in der Demo here.

finden Sie den Code unten:

HTML:

<ul id="header"> 

</ul> 

JS:

$(function() { 
    $("#header").append('<li id="btn">' + '<a href="javascript://" data-bind="click:function(data,event) { $root.testmethod(data,event); return true;}"> <span class="name">Test</span></a></li>'); 
    //ko.applyBindingsToNode(ul); 
}); 

Answer 4

mit foreach:

var DemoPage = (function() { 
 
    function DemoPage() { 
 
    var _this = this; 
 
    _this.buttons = ko.observableArray([]); 
 
    _this.debug = ko.observable(''); 
 
    _this.testmethod = function(data, event) { 
 
     _this.debug('Clicked LI: ' + data.buttonId); 
 
    } 
 
    _this.addHeadingRow = function() { 
 
     _this.buttons.push({ 
 
     buttonId: Math.floor(Math.random() * 100) 
 
     }); 
 
    } 
 
    } 
 
    return DemoPage; 
 
})(); 
 

 

 
var demoApp = new DemoPage(); 
 
ko.applyBindings(demoApp);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<ul id="header" data-bind="foreach: buttons"> 
 
    <li id="btn"> 
 
    <a data-bind="click: $root.testmethod"> 
 
     <span class="name">Test</span> 
 
    </a> 
 
    </li> 
 
</ul> 
 

 
<button data-bind="click: addHeadingRow">add heading row</button> 
 
<p data-bind="text: debug"></p>