將任意鍵（通過鍵碼）綁定到使用敲除的動作

Question

我正在尋找一種方法將許多不同的鍵綁定到我的viewmodel中的不同動作/函數。

我找到了這個example，其中綁定處理程序用於將操作綁定到輸入密鑰。

但是，我該如何修改這個處理程序以支持所提供的鍵碼？我希望能夠對各種按鍵使用相同的處理程序，並且最好還可以與修改鍵結合使用。

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; 
     }); 
    } 
}; 

Answer 1

你可以做這樣的事情：

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/> 

這裏是a fiddle展示這種結合。