jquery-ui - 无法在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 中无效(即， anchor 标签看起来像 IE9 中的禁用按钮，但在 Chrome 中，标签看起来像/是启用按钮)。我还尝试通过使用以下绑定(bind)直接操作 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>

不过，更好的方法是使用自定义绑定(bind)来设置按钮的禁用选项:

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);
    }
};

然后你可以像这样绑定(bind)它:

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