Wie bind ich neue Elemente mit Knockout?

Question

Wie kann ich ein neues Element erstellen, nachdem die Seite geladen wurde?

Ich habe so etwas wie dieses

system = function() 
{ 

    this.hello = function() 
    { 
     alert("hello"); 
    } 

    this.makeUI = function(container) 
    { 
     div = document.createElement("div"); 
     div.innerHTML = "<button data-bind='click: hello'>Click</button>"; 
    } 
} 

ko.applyBindings(new system); 

Wenn ich versuche, dieses

this.makeUI = function(container) 
{ 
    div = document.createElement("div"); 
    div.innerHTML = "<button data-bind='click: hello'>Click</button>"; 
    ko.applyBindings(new system,div); 
}  

aber nach theseposts wird es nicht funktionieren.

Answer 1

Das Ziel mit Knockout besteht darin, Knockout nur einmal auf einer Gruppe von dom-Elementen aufzurufen. Wenn Sie applyBindings wiederholt für das gesamte Dokument aufrufen, treten Probleme mit mehreren Bindungen auf. Es gibt einige Fälle, in denen applyBindings mehrere Male aufgerufen wird, und dies ist im Fall von Teilansichten, die zum Zeitpunkt der ersten Bindung nicht im Dom waren und daher nicht gebunden waren. Sie können diese binden, indem Sie die applyBindings für dieses dom-Element selektiv definieren.

Hier ist ein Beispiel für das, was Sie erreichen wollten. Ihr Problem war, dass Sie den von Ihnen erstellten Knoten nicht eingefügt haben.

http://jsfiddle.net/madcapnmckay/qSqJv/

Ich würde diesen Ansatz für dieses Beispiel nicht empfehlen, es gibt einen besseren Weg.

Wenn Sie dom-Elemente dynamisch erstellen und durch Knockout binden möchten, verwenden Sie am häufigsten die integrierte Template-Funktion, die das Einfügen der Elemente und das Binden aller gefundenen Datenbindungsattribute übernimmt.

Also, wenn Sie eine Reihe von Schaltflächen erstellen möchten könnte Ihr

this.makeUI = function(container) 
{ 
    self.buttons.push({ 
     text: "button " + self.buttons().length, 
     handler: this.hello 
    }); 
} 

Hier ist eine Geige tun.

http://jsfiddle.net/madcapnmckay/ACjvs/

Hoffnung, das hilft.