14

私のアプリケーションには、いくつかの設定情報を含むパネルがあります。このパネルはボタンクリックで開閉しますがesc、キーボードを叩いても閉じられるようにしたいです。

私のビューのコードは次のようになります。

Social.MainPanelView = Ember.View.extend({
    elementId: 'panel-account-settings',
    classNames: ['panel', 'closed'],
    keypress: function(e){
        console.log(e);
        console.log('keypress');
    },
    close: function(){
        this.$().prepareTransition().addClass("closed");
    }
});

キーアップとキーダウンも試しましたが、何も起こりません。これは「入力」タイプのビューではなく、単なる標準ビューであるためだと思います。では、キー イベントからビューでメソッドをトリガーするにはどうすればよいでしょうか。

これは、この特定の要素のルートのコンテキスト内にないことを明確にする必要があります。このビデオで見られるように、パネルをスタンドアロンで開いています。

http://screencast.com/t/tDlyMud7Yb7e

更新 1

これは、私が抱えている問題を説明するために作成した簡単なフィドルです。クリック イベントを非常に簡単にトリガーすることができますが、押された esc キーを検出し、特定のビューでメソッドをトリガーするページ全体のキーアップ イベントを探しています。

4

2 に答える 2

22

keyPress が機能するには、ビューにフォーカスを移動する必要があります。入力の場合は、それにフォーカスを当てているため機能します。

このようなもの：

App = Em.Application.create();

App.IndexController = Em.Controller.extend({
  updateKey: function(keyCode) {
    // Do what you gotta do
    this.set('shortcutKey', keyCode);
  },
  shortcutKey: null
});

App.IndexView = Em.View.extend({
  didInsertElement: function() {
    return this.$().attr({ tabindex: 1 }), this.$().focus();
  },

  keyDown: function(e) {

    this.get('controller').send('updateKey', e.keyCode);
  }
});

実例を次に示します: http://jsbin.com/ihuzov/1

于 2013-06-08T14:25:15.897 に答える
18

キープレスイベントのスペルが間違っていると思います。keyPressである必要があります。完全を期すために、ビューで処理できるイベントを以下に示します ( Ember source/docから取得)。

イベント名

上記の応答アプローチのいずれかで可能なイベント名は次のとおりです。

タッチ イベント:

  • touchStart
  • touchMove
  • touchEnd

  • touchCancel

    キーボード イベント

  • keyDown

  • keyUp

  • keyPress

    マウスイベント

  • mouseDown

  • mouseUp
  • contextMenu
  • click
  • doubleClick
  • mouseMove
  • focusIn
  • focusOut
  • mouseEnter

  • mouseLeave

    フォーム イベント:

  • submit

  • change
  • focusIn
  • focusOut

  • input

    HTML5 ドラッグ アンド ドロップ イベント:

  • dragStart

  • drag
  • dragEnter
  • dragLeave
  • drop
  • dragEnd
于 2013-03-11T19:37:32.887 に答える