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 に答える