输入类型=复位和敲除

单击表单重置按钮时，Knockout 不会更新可观察值。

http://jsfiddle.net/nQXeM/ 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/ http://jsfiddle.net/LK8sM/4/

如果重置按钮没有触发更改事件，我们将如何强制所有绑定到表单输入的可观察对象进行更新，而无需手动指定它们？

使用 jQuery 查找表单内的所有输入并触发更改事件是很容易的，但假设我们有一个仅限淘汰赛的受控表单。

我复制并修改了默认淘汰赛提交绑定 https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/submit.js为了为表单重置事件创建类似的绑定：

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">

and onFormReset将在您的视图模型上：

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

        return true;
    }
}

在重置处理程序中，如果返回 true，则 JavaScript 将继续在表单上调用其重置函数。但是，如果您要设置绑定到值的可观察量，则实际上并不需要让 JavaScript 继续重置表单。因此，从技术上讲，您可以不返回任何内容，或者在这种情况下返回 false。

其他人可以进一步扩展它以自动通知表单中所有绑定的可观察量，但这符合我的目的。