Knockout-Datenbindung an dynamisch generierten Elementen

Question

Wie ist es möglich, Knockout-Datenbindungsarbeiten an dynamisch generierten Elementen durchzuführen? Zum Beispiel füge ich ein einfaches html select-Menü in ein div ein und möchte Optionen mit den knockout-Optionen binden. So sieht mein Code aus:

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

aber diese Methode funktioniert nicht. Irgendwelche Ideen?

Answer 1

Wenn Sie dieses Element im laufenden Betrieb hinzufügen, nachdem Sie Ihr Ansichtsmodell gebunden haben, wird es nicht im Ansichtsmodell angezeigt und nicht aktualisiert. Sie können eines von zwei Dingen tun.

1. Fügen Sie das Element auf das DOM und neu binden, indem es ko.applyBindings(); wieder
2. oder fügen Sie die Liste an den DOM von Anfang aufrufen und die Optionen Sammlung in Ihrem Viewmodel leer lassen. Knockout rendert es erst, wenn Sie später Optionen zu Optionen hinzufügen.

Answer 2

EDIT: Es scheint, dass dies nicht seit Version 2.3 IIRC nach wie wies funktioniert LosManos

Sie einen anderen beobachtbaren zu Ihrer Ansicht Modell hinzufügen können mit myViewModel [newObservable] = ko.observable (‘ ')

Danach rufen Sie erneut auf ko.applyBindings.

Hier ist eine einfache Seite, wo ich Absätze dynamisch hinzufügen und das neue Ansichtsmodell und die Bindungen einwandfrei funktionieren.

// myViewModel starts only with one observable 
 
    \t var myViewModel = { 
 
    \t  paragraph0: ko.observable('First') 
 
    \t }; 
 
    
 
    \t var count = 0; 
 
    
 
    \t $(document).ready(function() { 
 
    \t \t ko.applyBindings(myViewModel); 
 
    
 
    \t \t $('#add').click(function() { 
 
    \t \t \t // Add a new paragraph and make the binding 
 
    \t \t \t addParagraph(); 
 
    \t \t \t // Re-apply! 
 
    \t \t \t ko.applyBindings(myViewModel); \t \t \t 
 
    \t \t \t return false; \t 
 
    \t \t }); 
 
    \t }); 
 
    
 
    \t function addParagraph() { 
 
    \t \t count++; 
 
    \t \t var newObservableName = 'paragraph' + count; 
 
    \t  $('<p data-bind="text: ' + newObservableName + '"></p>').appendTo('#placeholder'); 
 
    \t \t 
 
    \t  // Here is where the magic happens 
 
    \t \t myViewModel[newObservableName] = ko.observable(''); 
 
    \t \t myViewModel[newObservableName](Math.random()); 
 
    
 
    \t \t // You can also test it in the console typing 
 
    \t \t // myViewModel.paragraphXXX('a random text') 
 
    \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script> 
 

 
<div id="placeholder"> 
 
    <p data-bind="text: paragraph0"></p> 
 
</div> 
 
    
 
<a id="add" href="#">Add paragraph</a>

Answer 3

Basierend auf this existing answer habe ich etwas Ähnliches wie Ihre ursprünglichen Absichten achived:

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 ein JSFiddle ist zu spielen.

Seien Sie gewarnt, sobald das neue Element Teil des Doms ist, können Sie es nicht mit einem Aufruf an ko.applyBindings neu binden - deshalb verwende ich container.empty(). Wenn Sie das neue Element beibehalten und es ändern müssen, während sich das Ansichtsmodell ändert, übergeben Sie eine Observable an den Parameter viewModel der Methode extendBinding.

Answer 4

HTML-Bindungscode neu schreiben oder neu erstellen. Da HTML-Bindung verhindert "injizierten Bindungen" in dynamischer html:

ko.bindingHandlers['html'] = { 
 
    //'init': function() { 
 
    // return { 'controlsDescendantBindings': true }; // this line prevents parse "injected binding" 
 
    //}, 
 
    'update': function (element, valueAccessor) { 
 
    // setHtml will unwrap the value if needed 
 
    ko.utils.setHtml(element, valueAccessor()); 
 
    } 
 
};

Answer 5

Es ist eine alte Frage, aber hier ist meine hoffentlich up-to-date Antwort (Knockout 3.3.0):

Bei Verwendung von Knockout-Vorlagen oder benutzerdefinierten Komponenten zum Hinzufügen von Elementen zu vorgebundenen beobachtbaren Sammlungen wird knockout alles automatisch binden. Ihr Beispiel sieht aus wie eine beobachtbare Sammlung von Menüelementen würde die Aufgabe out of the Box erledigen.

Answer 6

Knockout 3.3

ko.bindingHandlers.htmlWithBinding = { 
      'init': function() { 
      return { 'controlsDescendantBindings': true }; 
      }, 
      'update': function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
       element.innerHTML = valueAccessor(); 
       ko.applyBindingsToDescendants(bindingContext, element); 
      } 
    }; 

Above Code-Schnipsel können Sie HTML-Elemente dynamisch mit dem "htmlWithBinding" Eigenschaft injizieren. Die untergeordneten Elemente, die hinzugefügt werden, werden dann ebenfalls ausgewertet ... d. H. Ihre Datenbindungsattribute.

Answer 7

Für v3.4.0 verwenden, um die benutzerdefinierten unten Bindung:

ko.bindingHandlers['dynamicHtml'] = { 
    'update': function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
     // setHtml will unwrap the value if needed 
     ko.utils.setHtml(element, valueAccessor()); 
     ko.applyBindingsToDescendants(bindingContext, element); 
    } 
}; 

Answer 8

Kasse diese Antwort: How do define a custom knockout 'options binding' with predefined Text and Value options

ko.applyBindingsToNode ist besonders nützlich.