javascript - 为什么我的动态按钮没有被 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

您的禁用绑定(bind)的数据绑定(bind)语法在附加的 HTML 中不正确，并且您重新应用绑定(bind)也不完全正确。

更改启用/禁用的可观察对象以使用 bool 值

isEnabled: ko.observable("disabled")

应该是:

isEnabled: ko.observable(true)

更正附加标记中的禁用数据绑定(bind)语法

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

更改绑定(bind)更新以重新绑定(bind)整个 View 模型

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

应该是:

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

Updated JSFiddle .

这将使您的示例发挥作用，但是如果您使用的是动态内容，我强烈建议您使用一些额外的绑定(bind)，而不是每次都附加 HTML 并重做绑定(bind)。看看Observable arrays , template binding , 和 working with collections .

我又拼凑了一个JS Fiddle example这显示了使用上述绑定(bind)实现动态内容和绑定(bind)的另一种方法。