4

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

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？

谢谢。

4

2 回答 2

10

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

<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>
于 2012-04-26T16:28:09.520 回答
0

代替

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

尝试

<a data-bind="enable: selected" href="http://www.google.com">Click Me</a>
于 2012-04-26T16:39:53.797 回答