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属性ロジックのほとんどは、アニメーションミックスインを介してビューに取り込まれます。

ご覧のとおり、私はこの実装が本当に好きではありません。理由は次のとおりです。

  1. 各キーイベントはコンテナビューの特定の関数にバインドされています。あるコンテキストでキー37にあることを実行させ、別のコンテキストで別のことを実行させたい場合（たとえば、マウスの矢印がある場合）はどうなりますか？

  2. onDocumentKeyDown関数がドキュメントに追加されました。理由は正確にはわかりませんが、耳障りに見えます。

  3. ObjectsViewには、インスタンス化とイベント委任を管理するロジックの両方があります。EmberのcontainerViewは、ナビゲーションロジックを処理することさえ意図されていますか？（私はそれらを2つの異なる関数に分けることができましたが、イベントが同じ方法で処理される場合、それらは道徳的に同等の解決策であるように見えます）。

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 に答える