为什么不是我的动态按钮禁用knockoutjs？

Question

我不确定为什么我的动态按钮没有使用knockoutjs禁用？

原工作动态HTML和knockoutjs：Link1
工作正在进行中：Link2

var viewModel = { 
    first: ko.observable("Bob"), 
    last: ko.observable("Smith"), 
    isEnabled: ko.observable("disabled") 
}; 

viewModel.fullName = ko.dependentObservable(function() { 
    return this.first() + " " + this.last(); 
}, viewModel); 

function addDynamicContent() { 
    $("#main").append("<div id='dynamic' data-bind='text: fullName'></div><input id='Button1' type='button' value='Hello World' data-bind='disabled=isEnabled' />"); 

    ko.applyBindings(viewModel, $("#dynamic")[0]); 
} 

ko.applyBindings(viewModel); 

Answer 1

的禁用绑定您的数据绑定语法是在你的附加HTML不正确的，你的补办绑定并不完全正确。

更改您的启用/禁用可观察到使用一个布尔值

isEnabled: ko.observable("disabled") 

应该是：

isEnabled: ko.observable(true) 

纠正你的附加标记中的禁用数据绑定语法

$("#main").append("<div id='dynamic' data-bind='text: fullName'></div><input id='Button1' type='button' value='Hello World' data-bind='disabled=isEnabled' />"); 

应该是：

$("#main").append("<div id='dynamic' data-bind='text: fullName'></div><input id='Button1' type='button' value='Hello World' data-bind='disable: isEnabled' />"); 

更改绑定更新整个视图模型

ko.applyBindings(viewModel, $("#dynamic")[0]); 

应该重新绑定：

ko.cleanNode($("#main")[0]); 
ko.applyBindings(viewModel); 

Updated JSFiddle。

这将使您的示例功能，但是如果您正在处理动态内容，我强烈建议使用一些额外的绑定，而不是每次都附加HTML和重新绑定您的绑定。看看Observable arrays，template binding和working with collections。

我把另一个JS Fiddle example放在一起，它显示了使用上述绑定的动态内容和绑定的另一种方法。