输入类型=重置和淘汰赛

Question

单击表单重置按钮时,Knockout不会更新observable.

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/

如果重置按钮没有触发更改事件,我们如何强制强制所有可以形成输入的observable更新而不必手动指定它们？

使用jQuery来查找表单内的所有输入并触发更改事件会很容易,但我们假设我们只有一个基于敲门的控制形式.

Answer 1

正如您所提到的，change重置表单时不会触发该事件。如果您只使用 KnockOut，我认为您没有真正的选择，除非您创建可以注册事件reset并检测更改的自定义绑定 - 这仍然会涉及手动 JS，但至少它会是集中的。

更通用的方法（尽管确实需要 jQuery）是创建一个函数来处理表单的reset事件，并检测当时表单输入的更改。

下面是一个可能有效的事件处理程序的示例。请注意，这不是生产就绪的代码。在使用之前我会用良好的 jQuery 眼光来查看它:)

$('form').on('reset', function (evt) {
    evt.preventDefault();
    $(this).find('input, select, textarea').each(function () {
        if ($(this).is('input[type="radio"], input[type="checkbox"]')) {
            if ($(this).is(':checked') !== $(this)[0].defaultChecked) {
                $(this).val($(this)[0].defaultChecked);
                $(this).trigger('click');
                $(this).trigger('change');
            }
        } else {
            if ($(this).val() !== $(this)[0].defaultValue) {
                $(this).val($(this)[0].defaultValue);
                $(this).change();
            }
        }
    });
});

这是一个演示这个想法的小提琴： http://jsfiddle.net/Fm8rM/2/