输入类型=重置和淘汰赛 [英] input type=reset and knockout

问题描述

当单击表格重置按钮时，击倒不会更新观察对象。

http://jsfiddle.net/nQXeM/

HTML：

 < form> 
< input type =textdata-bind =value：test/> 
< input type =resetvalue =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来查找表单内的所有输入并触发更改事件是很容易的，但假设我们只有一个敲除控件。

解决方案

我复制并修改了默认Knockout提交绑定，以便为表单重置事件创建一个类似的绑定：

  ko.bindingHandlers [''复位'] = {
 init：function（element，valueAccessor，allBindings，viewModel，binding上下文）{
 if（typeof valueAccessor（）！=='function'）
 throw new错误（'重置绑定的值必须是函数'）; 
 
 ko.utils.registerEventHandler（element，'reset'，function（event）{
 var handlerReturnValue; 
 var value = valueAccessor（）; 
 
试试{
 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逻辑来通知或重置您的特定领域。 
 
返回true; 
 
 
 
 
 
 
在重置处理程序中，如果返回true，那么JavaScript将继续在窗体上调用其重置功能。但是，如果您设置的是值得绑定的observables，那么您并不需要让JavaScript继续重置表单。因此，你可以在技术上不返回任何东西，或在这种情况下返回false。
 
 
其他人可以进一步扩展以自动通知窗体中所有绑定的observables，但是这为我的目的工作。
 
Knockout doesn't update observables when a form reset button is clicked. 

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());
Clearly the change event of the input box isn't being fired, as seen with this jQuery test:
http://jsfiddle.net/LK8sM/4/

How would we go about forcing all observables bound to form inputs to update without having to manually specify them if the reset button isn't firing of change events?

It would be easy enough to use jQuery to find all inputs inside the form and trigger change events, but lets assume we've a knockout only controlled form.
解决方案
I copied and modified the default Knockout submit binding in order to create a similar binding for the form reset event:
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;
                }
            }
        });
    }
};
You'd bind this like:
<form data-bind="reset: onFormReset">
and onFormReset would be on your view model:
function ViewModel() {
    this.onFormReset = function () {
        //Your custom logic to notify or reset your specific fields.

        return true;
    }
}
In your reset handler, if you return true, then JavaScript will continue to call its reset function on the form. If you are setting observables that are bound to value, though, you don't really need to have JavaScript continue to reset the form. Therefore, you could technically not return anything, or return false in that scenario.

Someone else could extend this further to notify all the bound observables in the form automatically, but this worked for my purposes.

                        
这篇关于输入类型=重置和淘汰赛的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！