Javascript 使用Knockout将任何键（通过keycode）绑定到操作

我正在寻找一种方法，将许多不同的键绑定到viewmodel中的不同操作/函数

我发现使用绑定处理程序将操作绑定到enter键

但是如何修改该处理程序以同时支持提供的密钥代码呢？我希望能够对所有类型的键使用相同的处理程序，并且最好与修改键结合使用

ko.bindingHandlers.executeOnEnter = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();
        $(element).keypress(function (event) {
            var keyCode = (event.which ? event.which : event.keyCode);
            if (keyCode === 13) {
                allBindings.executeOnEnter.call(viewModel);
                return false;
            }
            return true;
        });
    }
};

---

你可以这样做：

ko.bindingHandlers.actionKey = {
    init: function(element, valueAccessor, allBindings, data) {
        var handler = function(data, event) {
            var keys = ko.utils.unwrapObservable(allBindings().keys) || [13]; //default to Enter Key
            if (!Array.isArray(keys))
                keys = [keys];
            if (keys.indexOf(event.keyCode) > -1) {
                valueAccessor().call(data, data, event);
            };
        };
        var newValueAccessor = function() {
            return { keyup: handler };
        };
        ko.bindingHandlers.event.init(element, newValueAccessor, allBindings, data);
    }
};

Observable Keys: <input data-bind="actionKey: action, keys: keyCodes" /><br/>
Inline Keys: <input data-bind="actionKey: action, keys: [33, 34]" /><br/>
Inline Key: <input data-bind="actionKey: action, keys: 33" /><br/>
Default Keys: <input data-bind="actionKey: action" /><br/>

您可以像这样使用此绑定：

ko.bindingHandlers.actionKey = {
    init: function(element, valueAccessor, allBindings, data) {
        var handler = function(data, event) {
            var keys = ko.utils.unwrapObservable(allBindings().keys) || [13]; //default to Enter Key
            if (!Array.isArray(keys))
                keys = [keys];
            if (keys.indexOf(event.keyCode) > -1) {
                valueAccessor().call(data, data, event);
            };
        };
        var newValueAccessor = function() {
            return { keyup: handler };
        };
        ko.bindingHandlers.event.init(element, newValueAccessor, allBindings, data);
    }
};

Observable Keys: <input data-bind="actionKey: action, keys: keyCodes" /><br/>
Inline Keys: <input data-bind="actionKey: action, keys: [33, 34]" /><br/>
Inline Key: <input data-bind="actionKey: action, keys: 33" /><br/>
Default Keys: <input data-bind="actionKey: action" /><br/>

可观察键：

内联键：

内联键：

默认键：

---

此处演示此绑定。

非常好，但不适用于knockout 3.x Uncaught TypeError:无法读取未定义的属性“$data”。如果输入绑定到可观察的值，则必须添加

值更新：“afterkeydown”

绑定。如果用户键入文本然后点击enter键，则在绑定

actionKey

之前不会引发onblur事件，从而导致可观察对象返回意外值，而不是当前文本。