Escape 键在 Knockout JS 中不起作用

Question

 <input type="text" data-bind="value: name" />

预期结果：

在为 [name] 键入值时按下 "escape key" 时，它应该 return 到其先前的值。

实际结果：

即使我按下 "escape key"

值也保持不变

jsfiddle here

Answer 1

您期望 ctrl-z 键行为附加到 escape 键，因为转义键不是为了撤消您在按下时所做的更改而构建的。

要实现这一点，我们可以使用 keydown 事件，因为 keypress 不会检测转义键。

查看：

<input id="test" type="text" data-bind="value: name,event:{keydown :escKey}" />
<pre data-bind="text:ko.toJSON($data,null,2)"></pre>

viewModel:

var model = function(){
    var self=this;
    self.name= ko.observable("smith");
    self.escKey= function (data, event) {
        if (event && event.keyCode == 27) {
            $('#test').val(data.name());
        }
        return true;
    }
};
ko.applyBindings(new model());

工作样本here

或者，您可以使用 biningHandlers 来实现类似的功能，但将其作为最后的手段。

Answer 2

感谢超级酷:)

根据 super cool 的回答，我创建了一个自定义绑定处理程序来解决这个问题。好吧，它是一样的，但对我来说，如果你打算在 bindingHandler 中执行它，你的视图模型会更干净。

 ko.bindingHandlers.cancelOnEscape = {
        init: function (element, accessor) {
            var _accessor = accessor();

            $(element).keydown(function (event) {
                if (event && event.keyCode == 27) {
                    $(element).val(_accessor());
                }
                return true;
            });
        }
    };

这是 jsfiddle http://jsfiddle.net/6h1bbLm9/4/

Escape 键在 Knockout JS 中不起作用

Escape key is not working in Knockout JS

binding

keypress

knockout.js

预期结果：

实际结果：