javascript - 使用 Ember.js，处理键盘事件的常见模式有哪些？

Question

我正在尝试做的事情:

假设浏览器中有一个 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 的。

正如您所看到的，我真的不喜欢这个实现，因为:

1. 每个按键事件都绑定(bind)到容器 View 中的特定功能，如果我希望按键 37 在某个上下文中执行一项操作，而在另一个上下文中执行其他操作(例如鼠标箭头所在的位置)，该怎么办？

2. onDocumentKeyDown 函数被添加到文档中，我不能确切地说出原因，但它看起来很刺耳。

3. ObjectsView 具有管理实例化和事件委托(delegate)的逻辑。 Ember 中的 containerView 真的是用来处理导航逻辑的吗？ (我可以将它们分成两个不同的函数，但如果事件以相同的方式处理，那么它们似乎是道德上等效的解决方案)。

Ember 或任何 JS MV* 框架中是否有任何常用模式，可以通过某种单实例中央集线器处理关键事件，然后根据应用程序状态传播到系统的其他部分？这个 Ember 路由器概念，是否适合这里？

谢谢!

Answer 1

为了使用 Ember 处理键盘事件，我们利用了 Flame.js 的 EventManager 实现。或许你也能得到类似的启发:https://github.com/flamejs/flame.js/blob/master/mixins/event_manager.js