Knockout Bindung ist nicht

Question

arbeiten Warum Knockout Bindung ist nicht auf den folgenden Code arbeiten

ko.components.register('like-widget', { 
    template: "<input data-bind=\"value: firstName\" />" 
}); 

ko.applyBindings() 

$('#btnAdd').on('click', function() { 
    var $newWidget = $('<like-widget>'); 
    $('#addZone').append($newWidget); 
    ko.applyBindings({ firstName: ko.observable("Bert") }, $newWidget[0]); 
}); 

Answer 1

Der Ansatz, den Sie (mit jQuery) ausgewählt haben, ist nicht sehr „Knockout-like“. Dennoch kann es geschehen:

in Ihrem HTML-Markup, müssen Sie explizit Knockout erzählen, die in der Komponente Ansichtsmodell verwenden Parameter (Verwendung params="")

ko.components.register('like-widget', { 
 
    template: "<input data-bind=\"value: firstName\" />" 
 
}); 
 

 
ko.applyBindings({}) 
 

 
$('#btnAdd').on('click', function() { 
 
    var $newWidget = $('<like-widget params="firstName: firstName">'); 
 
    $('#addZone').append($newWidget); 
 

 

 
    ko.applyBindings({ 
 
    firstName: ko.observable("Bert") 
 
    }, $newWidget[0]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div id="addZone"></div> 
 
<button id="btnAdd">add</button>

Mein Vorschlag jedoch, ist eine click Bindung und eine observableArray von Widget Viewmodels zu verwenden.

var components = ko.observableArray([]); 
 
var addComponent = function() { 
 
    components.push({ 
 
    firstName: "Bert" 
 
    }); 
 
} 
 

 
ko.components.register('like-widget', { 
 
    viewModel: function(params) { 
 
    this.firstName = ko.observable(params.firstName || ''); 
 
    }, 
 
    template: "<input data-bind=\"value: firstName\" />" 
 
}); 
 

 
ko.applyBindings({ 
 
    components: components, 
 
    addComponent: addComponent 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="foreach: components"> 
 
    <like-widget params="firstName: firstName" /> 
 
</div> 
 

 
<button data-bind="click: addComponent">add</button>