knockout data-bind sur des éléments générés dynamiquement

knock-out 3.3

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

ci-dessus code snippet vous permet d'injecter des éléments html dynamiquement avec la propriété" htmlWithBinding". L'enfant les éléments qui sont ajoutés sont également évalués... c'est-à-dire leurs attributs de liaison de données.

réécrire le code de liaison html ou en créer un nouveau. Parce que HTML binding empêche les "fixations injectées" en html dynamique:

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());
  }
};

pour v3.4.0 utilisez la liaison personnalisée ci-dessous:

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);
    }
};

EDIT: Il semble que cela ne fonctionne pas depuis la version 2.3 IIRC comme indiqué par LosManos

vous pouvez ajouter un autre observable à votre modèle de vue en utilisant myViewModel[newObservable] = ko.observables(")

après ça, rappelez ko.applyBindings.

Voici une page simple où j'ajoute des paragraphes dynamiquement et le nouveau modèle de vue et les reliures fonctionnent parfaitement.

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

<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>

C'est une vieille question, Mais voici ma réponse si tout va bien à jour (K. O. 3.3.0):

lorsque vous utilisez des modèles knockout ou des composants personnalisés pour ajouter des éléments à des collections observables, knockout liera tout automatiquement. Votre exemple ressemble à une collection observable d'éléments de menu ferait le travail hors de la boîte.

basé sur cette réponse existante , j'ai obtenu quelque chose similaire à vos intentions initiales:

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"]
    });
}

voici un JSFiddle pour jouer avec.

soyez averti, une fois que le nouvel élément fait partie du dom, vous ne pouvez pas le re-lier avec un appel à ko.applyBindings - c'est pourquoi j'utilise container.empty() . Si vous avez besoin de préserver le nouvel élément et de le faire changer au fur et à mesure que le modèle de vue change, passer un observable au paramètre viewModel de la méthode extendBinding .

Check-Out cette réponse: comment définir un knockout personnalisé 'options binding' avec un texte prédéfini et des options de valeur

ko.applyBindingsToNode est particulièrement utile.