3

さまざまな種類の約 50 の入力を持つノックアウト ビューがあります。次のコードでモデルにいつ変更が加えられたかをすでに追跡しています

self.Changed = ko.computed(function() {
    return ko.toJS(self.Outing);
});

次に、Changed 関数をサブスクライブして、モデルをサーバーに保存します。私が達成したいのは、ユーザーが個々の入力を変更すると、その入力にCSSバインディングがトリガーされて強調表示されるため、ユーザーは自分が何を変更したかがわかります。監視可能な各プロパティを個別にサブスクライブせずにこれを行うにはどうすればよいですか?

4

1 に答える 1

5

このようなものを処理する方法はいくつかあります。これを行うための便利な方法は、元の値を取得し、元の値と現在の値を調べる計算に対してcssバインディングを設定するカスタムバインディングです。

多分次のようなものです：

ko.bindingHandlers.changedCss = {
    init: function(element, valueAccessor, allBindings) {
        var original, isDirty, data, cssClass, binding;

        data = allBindings().value;
        original = ko.utils.unwrapObservable(data);
        isDirty = ko.computed({
            read: function() {
                return ko.utils.unwrapObservable(data) !== original;
            },            
            disposeWhenNodeIsRemoved: element
        });

        cssClass = ko.utils.unwrapObservable(valueAccessor());
        binding = { css: {} };
        binding.css[cssClass] = isDirty;

        ko.applyBindingsToNode(element, binding);       
    }                          
};

次のように使用します。<input data-bind="value: first, changedCss: 'changed'" />

したがって、このアイデアは、バインディングがバインドされているものを探しvalue、計算された監視可能なオンザフライを設定して、このプロパティのダーティフラグを提供することです。css次に、バインディングに渡されたクラス名を使用して、プログラムでバインディングを追加します。

http://jsfiddle.net/rniemeyer/PCmma/

または、ビューモデル側からこのダーティトラッキングを追加できる拡張機能を作成することもできます。これにより、トラッキングをリセットする機能など、追加の柔軟性が得られます（現在の値をクリーンであると見なしてください）。手始めに、次のようなことを行うことができます。

ko.subscribable.fn.trackDirtyFlag = function() {
    var original = this();

    this.isDirty = ko.computed(function() {
        return this() !== original;
    }, this);

    return this;    
};

次に、次のように使用します。this.first = ko.observable("John").trackDirtyFlag();

http://jsfiddle.net/rniemeyer/JtvWd/

次に、現在の値と等しくなるようにreset設定するメソッドを追加するなどの操作を行うことができます。original

ダーティフィールドに色を付けることだけが目的の場合は、ビューモデルをまったく変更する必要がないため、カスタムバインディングが適している可能性があります。

于 2012-10-23T01:46:21.070 に答える