Korrektes mehrfaches Anwenden von Bindungen

Question

Ich überarbeite einen vorhandenen Code, um Knockout zu verwenden. Der betreffende Code ist ein Kalender und wird dynamisch so erstellt, wie der Benutzer die vorherigen und nachfolgenden Monate oder Wochen durchsucht.

Die Art und Weise, wie der Kalender funktioniert, wenn der Benutzer die nächste oder vorherige Taste drückt, wird gelöscht und dann neu erstellt.

Erste Knockout-Arbeit war einfach, nur eine Frage der Anwendung der richtigen data-bind Argumente auf die Zelle und dann ko.applyBindings anrufen.

Meine Sorge ist, dass, weil der Code die DOM-Elemente zerstört, an die Knockout gebunden ist, dass es Speicher leckt. Ist dies der Fall, und wenn ja, was sollte der Kalender tun, bevor er den Container mit den Bindungen löscht?

Answer 1

Im Allgemeinen müssen Sie Bindungen nicht mehrfach anwenden. Sie erstellen ein Modell, wählen einen DOM-Knoten und wenden Bindings darauf an. Wenn sich während der Anwendungslebensdauer etwas im Modell ändert, werden diese Änderungen im Markup widergespiegelt, indem Benachrichtigungen über beobachtbare oder berechnete Eigenschaften des Modells geändert wurden.

Aber wenn Sie Knockout-Komponente in eine andere Anwendung injizieren, der den Knoten verwaltet die Knockout-Bindungen angewendet wurde, können Sie Knoten aus Knockout-Bindungen reinigen:

var element = document.getElementById("MyNodeId"); 
ko.cleanNode(element); 

Answer 2

Verwenden Sie das cleanNode nicht Funktion, um ein Modell neu zu binden - stattdessen machen Sie das Modell auch beobachtbar.

Entnommen Jef Claes blog, ich habe dieses Konzept wurde mit Modell erneut zu binden, statt cleanNode zu verwenden.

Beispielcode

<div id="books"> 
    <ul data-bind="foreach: bookModel().booksImReading"> 
     <li data-bind="text: name"></li> 
    </ul> 
</div> 

var page = { 
    bookModel : ko.observable({ 
     booksImReading: [ 
      { name: "Effective Akka" }, 
      { name: "Node.js the Right Way" }] 
    }) 
}; 

ko.applyBindings(page, elementToBind); 

page.bookModel({ 
    booksImReading: [ 
     { name: "SQL Performance Explained" }, 
     { name: "Code Connected" }] 
});