Escape 键在 Knockout JS 中不起作用答案

【问题标题】：Escape key is not working in Knockout JSEscape 键在 Knockout JS 中不起作用
【发布时间】：2015-09-08 02:46:09
【问题描述】：

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

预期结果：

在为 [name] 键入值时按下“退出键”时，它应该返回到之前的值。

实际结果：

即使按下“退出键”，值也保持不变

jsfiddle here

【问题讨论】：

标签： knockout.js binding keypress

【解决方案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>

视图模型：

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 来实现类似的功能，但将其作为最后的手段。

【讨论】：

非常好，非常感谢。但我认为我应该尝试根据您的代码制作自定义 bindingHandler，因为我不希望我的视图模型直接访问“#test”元素。谢谢谢谢:)

【解决方案2】：

谢谢超级酷:)

根据超酷的回答，我创建了一个自定义绑定处理程序来解决这个问题。嗯，它是一样的，但对我来说，如果你要在 bindingHandler 中做，你的 viewmodel 会更干净。

 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/

【讨论】：