我正在尝试做的事情:
假设浏览器中有一个 div 数组，这些 div 会根据用户请求进行实例化或删除。 当按下左箭头或右箭头键时，div 应该向左或向右移动。
我当前的(设计不当)解决方案:
事件处理和委托(delegate):
function onDocumentKeyDown( event ){
switch ( event.keyCode ){
case 37: App.objectsView.scrollLeft(); break;
case 39: App.objectsView.scrollRight(); break;
}
}
// add event listener to document
function addEventListeners() {
document.addEventListener( 'keydown', onDocumentKeyDown, false );
}
addEventListeners();
应用程序容器 View :
App.objectsView = Ember.ContainerView.create({
childViews: [],
// CRUD stuff
createView: function(){ ... },
deleteView: function(){ ... },
updateView: function(){ ... },
// navigation stuff
scrollRight: function(){
this.scroll('right')
},
scrollLeft: function(){
this.scroll('left')
},
scroll: function( direction ){
this.get('childViews').forEach( function( key ){
var object = key;
object.move( direction );
}, this)
},
});
应用程序 View 类(为了完整性，并不是那么相关):
App.ObjectView = Ember.View.extend( Animation, {
...
move: function( param ){ ... }
});
*注意，大部分 dom 选择和更改 css 属性逻辑都是通过动画 mixin 引入 View 的。
正如您所看到的，我真的不喜欢这个实现，因为:
每个按键事件都绑定(bind)到容器 View 中的特定功能，如果我希望按键 37 在某个上下文中执行一项操作，而在另一个上下文中执行其他操作(例如鼠标箭头所在的位置)，该怎么办？
onDocumentKeyDown 函数被添加到文档中，我不能确切地说出原因，但它看起来很刺耳。
ObjectsView 具有管理实例化和事件委托(delegate)的逻辑。 Ember 中的 containerView 真的是用来处理导航逻辑的吗？ (我可以将它们分成两个不同的函数，但如果事件以相同的方式处理，那么它们似乎是道德上等效的解决方案)。
Ember 或任何 JS MV* 框架中是否有任何常用模式，可以通过某种单实例中央集线器处理关键事件，然后根据应用程序状态传播到系统的其他部分？这个 Ember 路由器概念，是否适合这里？
谢谢!
最佳答案
为了使用 Ember 处理键盘事件，我们利用了 Flame.js 的 EventManager 实现。或许你也能得到类似的启发:https://github.com/flamejs/flame.js/blob/master/mixins/event_manager.js
关于javascript - 使用 Ember.js，处理键盘事件的常见模式有哪些？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12738679/