Question

我想做什么：

想象一下，在浏览器中有一个div数组，每个用户请求都会实例化或删除div。按下左箭头或右箭头键时，div应向左或向右移动。

我当前（制作精良）的解决方案：

事件处理和授权：

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

应用程序容器视图：

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


});

应用程序视图类（为了完整性，不是那么相关）：

App.ObjectView = Ember.View.extend( Animation, {

    ...

    move: function( param ){ ... }

});

*注意，大多数dom选择和更改css属性逻辑都通过动画mixin进入视图。

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

每个键事件都绑定到容器视图中的特定函数，如果我希望键37在某个上下文中执行一个操作而在另一个上下文中执行其他操作（例如鼠标箭头所在的位置），该怎么办？
onDocumentKeyDown函数被添加到文档中，我不能确切地说出原因，但它看起来很刺激。
ObjectsView具有管理实例化和事件委派的逻辑。 Ember中的containerView是否意味着要处理导航逻辑？（我可以将它们分成两个不同的功能，但如果事件的处理方式相同，那么它们似乎在道德上是等效的解决方案。）

Ember中是否存在任何常用模式或只是通过某种单实例中心集中处理键事件的任何JS MV *框架，然后在每个应用程序状态下传播到系统的其他部分？而这个Ember路由器的概念，在某种程度上适合吗？

谢谢！

Answer 1

为了使用Ember处理键盘事件，我们使用了Flame.js中的EventManager实现。也许你可以采取类似的灵感：https://github.com/flamejs/flame.js/blob/master/mixins/event_manager.js

使用Ember.js，处理键盘事件的常见模式是什么？

1 个答案: