无法在chrome中使用knockoutjs禁用jqueryui按钮

Question

我有以下非常简单的代码:

HTML

<a data-bind="enable: selected()" href="http://www.google.com">Click Me</a>

JavaScript的

function pageViewModel() {
    var self = this;
    self.selected = ko.observable();
}
$(document).ready(function() {
    $("a").button();
    ko.applyBindings(new pageViewModel());
});

这适用于IE9但不适用于Chrome(即在IE9中使锚标记看起来像禁用按钮,但在Chrome中,标记看起来像/是启用按钮).我也试过通过以下绑定直接操作css来禁用按钮:

<a data-bind="css: {ui-button-disabled: !selected(), ui-state-disabled: !selected()}">Click Me</a>

但显然,knockoutjs并不喜欢我正在使用的类具有 - 在其中的事实.

所以现在我被卡住了.有没有人对如何使用jqueryui和knockoutjs为这两个浏览器工作有任何想法？

谢谢.

Answer 1

您可以将类名括在引号中:

<a data-bind="css: {'ui-button-disabled': !selected(), 'ui-state-disabled': !selected()}">Click Me</a>

但是,更好的方法是使用自定义绑定来设置按钮的禁用选项:

ko.bindingHandlers.button = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).button();
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            disabled = ko.utils.unwrapObservable(value.disabled);

        $(element).button("option", "disabled", disabled);
    }
};

然后你可以绑定它:

<a data-bind="button: { disabled: !selected() }">Click Me</a>