9

フォームのリセット ボタンがクリックされたときに、Knockout はオブザーバブルを更新しません。

http://jsfiddle.net/nQXeM/

HTML:

<form>
    <input type="text" data-bind="value: test" />
    <input type="reset" value="reset" />
</form>
<p data-bind="text: test"></p>

JS:

function ViewModel() {
    this.test = ko.observable("");
}

ko.applyBindings(new ViewModel());

この jQuery テストで見られるように、入力ボックスの変更イベントが発生していないことは明らかです: http://jsfiddle.net/LK8sM/4/

リセット ボタンが変更イベントを発生させていない場合、手動で指定することなく、フォーム入力にバインドされたすべてのオブザーバブルを強制的に更新するにはどうすればよいでしょうか?

jQuery を使用してフォーム内のすべての入力を検索し、変更イベントをトリガーするのは簡単ですが、ノックアウトのみの制御フォームがあると仮定しましょう。

4

2 に答える 2

3

フォーム リセット イベントに対して同様のバインディングを作成するために、デフォルトの Knockout 送信バインディングをコピーして変更しました。

ko.bindingHandlers['reset'] = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        if (typeof valueAccessor() !== 'function')
            throw new Error('The value for a reset binding must be a function');

        ko.utils.registerEventHandler(element, 'reset', function (event) {
            var handlerReturnValue;
            var value = valueAccessor();

            try {
                handlerReturnValue = value.call(bindingContext['$data'], element);
            } finally {
                if (handlerReturnValue !== true) {
                    if (event.preventDefault)
                        event.preventDefault();
                    else
                        event.returnValue = false;
                }
            }
        });
    }
};

これを次のようにバインドします。

<form data-bind="reset: onFormReset">

そしてonFormResetあなたのビューモデルになります：

function ViewModel() {
    this.onFormReset = function () {
        //Your custom logic to notify or reset your specific fields.

        return true;
    }
}

リセット ハンドラで true を返すと、JavaScript は引き続きフォームでリセット関数を呼び出します。ただし、値にバインドされたオブザーバブルを設定している場合は、JavaScript でフォームをリセットし続ける必要はありません。したがって、技術的には何も返さないか、そのシナリオで false を返すことができます。

他の誰かがこれをさらに拡張して、フォーム内のバインドされたすべてのオブザーバブルを自動的に通知することができますが、これは私の目的には適していました。

于 2015-02-05T16:24:25.537 に答える