为什么我的动态按钮不能用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中禁用绑定的数据绑定语法不正确，并且重新应用绑定并不完全正确。

更改已启用/已禁用的observable以使用布尔值

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' />");

更改绑定更新以重新绑定整个viewmodel

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放在一起，显示了使用上述绑定的动态内容和绑定的另一种方法。