使用Knockout将任何键(通过keycode)绑定到一个动作
Bind any key (by keycode) to an action using Knockout
我正在寻找一种方法,将许多不同的键绑定到我的视图模型中的不同动作/函数。
我发现这个例子中使用绑定处理程序将操作绑定到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/>
相关文章:
- 将动态元素绑定到函数;只剩下一个绑定
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- 使用react router/react router redux将特定的redux操作绑定到一个路由
- 在dojo中将数据从一个选项卡绑定到另一个选项卡(打开选项卡?)
- 在我的JavaScript模块中绑定一个点击事件
- javascript绑定另一个select2输入字段rails的select2 inputonchange事件的数据
- 在另一个可浏览的应用程序中包含已绑定的文件
- D3.js如何只创建一个绑定到多个数据项的数据集的元素
- 将元素的可见性绑定到另一个元素
- 如果指令包含在另一个指令中,我如何在隔离范围内添加双向数据绑定属性
- 创建一个计算值数组,该数组绑定到AngularJS中的其他输入
- jQuery使用最后一个参数在Javascript循环中单击绑定函数
- 在href跳转到另一个html元素之前,执行Knockout.js数据绑定:点击函数
- 内部有另一个绑定的敲除html绑定
- 从自定义绑定处理程序中更改另一个绑定
- Javascript重新绑定一个绑定函数
- 剑道UI -在另一个绑定中创建绑定
- 多个元素上的动态绑定处理程序将只调用最后一个绑定函数
- 有没有一种方法可以创建一个绑定函数,在数组中提供它的参数?
- 可观察值更新只会改变一个绑定元素,而不会改变另一个