淘汰禁用绑定不工作与jquery ui按钮

Knockout disable binding is not working with jquery ui button

本文关键字：jquery ui 按钮 工作 绑定 淘汰      更新时间：2023-09-26

我在jquery ui按钮上使用knockout disable绑定。当我使用data-bind='disable: ture'上的任何按钮上的jquery ui按钮插件应用，它禁用该按钮，但其外观没有设置为禁用。这里我创建了一个示例小提琴:

http://jsbin.com/arotuh/2/edit

我错过了什么

正如spullen所提到的，我将如何使用自定义绑定:

ko.bindingHandlers.jqButton = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = valueAccessor();
        for (var p in options) {
            options[p] = ko.utils.unwrapObservable(options[p]);
        }
        $(element).button(options);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).button("destroy");
        });
    },
    update: function (element, valueAccessor) {
        var options = valueAccessor();
        for (var p in options) {
            options[p] = ko.utils.unwrapObservable(options[p]);
        }
        $(element).button("option", options);
        $(element).button("refresh");
    }
};
ko.applyBindings({
    flag: ko.observable(true)
});

在HTML中:

<button  data-bind="jqButton: {disabled: flag} ">Disable state using knockout disable binding</button>

看起来，当您使用jqueryui按钮时，它覆盖了属性的默认行为(因为它控制了它们，但不确定如何，可能需要进一步研究)。

然而，我能够让它工作改变顺序:

ko.applyBindings();
$("button").eq(0).button();
$("button").eq(1).button({ disabled: true });

为了让这两个库很好地发挥作用，您还可以编写自定义绑定。

我想通过为jquery ui按钮的选项添加对使用可观察对象的支持来详细说明gbs的示例(它工作得很好)(例如禁用映射到可观察对象，而不仅仅是true或false)。

ko.bindingHandlers.jqButton = {
init: function (element, valueAccessor, allBindingsAccessor) {
    var options = valueAccessor();
    for (var p in options) {
        // CHANGE STARTS HERE
        if (ko.isObservable(options[p]))
            options[p].subscribe(function (newValue) {
                $(element).button("option", p, newValue);
                $(element).button("refresh");
            });
        // CHANGE ENDS HERE
        options[p] = ko.utils.unwrapObservable(options[p]);
    }
    $(element).button(options);
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).button("destroy");   
    });
},
update: function (element, valueAccessor) {
    var options = valueAccessor();
    for (var p in options) {
        options[p] = ko.utils.unwrapObservable(options[p]);
    }
    $(element).button("option", options);
    $(element).button("refresh");
}

};

相关文章：