2

ノックアウトを使用して「not」バインディングを実装することは可能ですか? 基本的に、バインディングの値を無効にしたいのですが、双方向のバインディング/可観測性は保持します。

私のビュー モデルにはプロパティがありますisVisibleが、私の UI 要件では、非表示または「非表示」状態を表すチェックボックスを提供する必要があります。否定された状態を追跡するために、重複または 2 番目のプロパティを作成したくありません。

次のようなコードは、observable をバインディングに渡さないため、完全には機能しません。

<label>Is Hidden?<input type="checkbox" data-bind="checked: !isVisible()" /></label>

注: これは Q&A スタイルの質問です。回答を投稿していますが、別の回答や改善された回答にも非常に興味があります。

4

1 に答える 1

1

checked、visible、などの単一パラメーターの「bool」タイプのバインディングに使用できる「not」バインディングを次に示しますenable。

次のようにバインディングを使用します。

<input type="checkbox" data-bind="not: {checked: isVisible}" />

notバインディング:

ko.bindingHandlers.not = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        //expects a single, truthy/falsy binding, 
        //    such as checked, visible, enable, etc.
        var binding = valueAccessor();
        var observable = binding[Object.keys(binding)[0]];
        var notComputed = ko.computed({
            read: function () {
                return !observable();
            },
            write: function (newValue) {
                observable(!newValue);
            }
        });
        var newBinding = {};
        newBinding[Object.keys(binding)[0]] = notComputed;
        ko.applyBindingsToNode(element, newBinding, viewModel);
    }
};

バインディングを磨こうとはしていませんが、完全に機能しているようです。

フィドルを見る

于 2013-05-03T23:06:48.610 に答える