0

我正在尝试做的事情：

想象在浏览器中有一个 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 属性逻辑是通过 Animation mixin 引入到视图中的。

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

  1. 每个键事件都绑定到容器视图中的特定函数，如果我希望键 37 在某些上下文中做一件事而在另一个上下文中做其他事情（例如鼠标箭头所在的位置）怎么办？

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

  3. ObjectsView 具有管理实例化和事件委托的逻辑。Ember 中的 containerView 是否甚至意味着处理导航逻辑？（我可以将它们分成两个不同的功能，但如果事件以相同的方式处理，那么它们似乎是道德上等价的解决方案）。

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

谢谢！

4

1 回答 1

3

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

于 2012-10-05T04:42:23.500 回答