Knockout-Datenbindung bei dynamisch erzeugten Elementen

Question

Wie ist es möglich, Knockout Data-Bind auf dynamisch generierte Elemente anzuwenden? Ich füge zum Beispiel ein einfaches HTML-Auswahlmenü in ein Div ein und möchte die Optionen mit der Knockout-Optionen-Bindung auffüllen. So sieht mein Code aus:

$('#menu').html('<select name="list" data-bind="options: listItems"></select>');

aber diese Methode funktioniert nicht. Irgendwelche Ideen?

Answer 1

Es ist eine alte Frage, aber hier ist meine hoffentlich aktuelle Antwort (Knockout 3.3.0):

Wenn Sie Knockout-Vorlagen oder benutzerdefinierte Komponenten verwenden, um Elemente zu vorgebundenen beobachtbaren Sammlungen hinzuzufügen, wird Knockout alles automatisch binden. In Ihrem Beispiel sieht es so aus, als ob eine beobachtbare Sammlung von Menüpunkten die Aufgabe sofort erledigen würde.

Answer 2

Basierend auf diese bestehende Antwort habe ich etwas Ähnliches erreicht wie Ihre ursprünglichen Absichten:

function extendBinding(ko, container, viewModel) {
    ko.applyBindings(viewModel, container.children()[container.children().length - 1]);
}

function yourBindingFunction() {
    var container = $("#menu");
    var inner = $("<select name='list' data-bind='options: listItems'></select>");
    container.empty().append(inner);

    extendBinding(ko, container, {
        listItems: ["item1", "item2", "item3"]
    });
}

Hier ist ein JSFiddle zum Spielen.

Seien Sie gewarnt, sobald das neue Element Teil des Dom ist, können Sie es nicht mehr mit einem Aufruf von ko.applyBindings - Deshalb verwende ich container.empty() . Wenn Sie das neue Element beibehalten und es sich ändern lassen wollen, wenn sich das Ansichtsmodell ändert, übergeben Sie eine Observable an die viewModel Parameter des extendBinding Methode.

Answer 3

Sehen Sie sich diese Antwort an: Wie definiert man eine benutzerdefinierte Knockout-'Optionsbindung' mit vordefinierten Text- und Wertoptionen?

ko.applyBindingsToNode ist besonders nützlich.