ember.js - Ember.jsでイベントを処理するための最良の方法は何ですか？

Question

私はEmberを学び始めていますが、イベントを処理するための最良の、最も受け入れられる、または意図された方法が何であるかは明確ではありません。クリック関数のイベント引数でターゲットをチェックすることはできますか？{{action}}以外のイベント、またはまったく異なるイベントを必要とするアイテムごとに新しいビューを作成する必要がありますか？

Answer 1

IMO{{action}}可能な場合はヘルパーを使用する必要があります。テンプレートのタグにイベントを添付する場合は、{{action}};を使用します。新しいビューを作成する必要はありません:

<a {{action showPosts href=true}}>All Posts</a>

<form {{action validate target="controller"}}>
  // ...
</form>

上記の例外は、特定の要素で複数のイベントを処理する場合です。

// Template
<ul>
  {{#each post in controller}}
    {{#view App.PostView}}
      {{title}}
      {{#if view.showDetails}}
        <span>{{summary}}</span>
      {{/if}}
    {{/view}}
  {{/each}}
</ul>

// View
App.PostView = Ember.View.extend({
   tagName: li,
   classNames: ['post-item'],
   mouseEnter: function(event) {
     this.set('showDetails', true);
   },

   mouseLeave: function(event) {
     this.set('showDetails', false);
   }
});

mouseEnterと(投稿の詳細をそれぞれ表示および非表示にするため) の両方をキャプチャする必要があるためmouseLeave、ビューで行うことをお勧めします。テンプレートのロジックが多すぎないようにします。上記の別の方法は、処理したいイベントの数 (この場合は 2) と同じ数のネストされたタグを使用することです。

// Template
<ul>
  {{#each post in controller}}
    <li class="post-item" {{action showTheDetails post on="mouseEnter" target="controller"}}>
    <span class="dummy" {{action hideTheDetails post on="mouseLeave" target="controller"}}
      {{title}}
      {{#if post.showDetails}}
        <span>{{summary}}</span>
      {{/if}}
    </span<
    </li>
  {{/each}}
</ul>

そして、コントローラーで：

// Controller
App.PostsController = Ember.ArrayController.extend({
   showTheDetails: function(event) {
     var post = event.context;
     post.set('showDetails', true);
   },

   hideTheDetails: function(event) {
     var post = event.context;
     post.set('showDetails', false);
   }
});

しかし、これは醜いことに同意していただけると思います。ここを参照してください。

---

Ember コントロール ビュー ( Ember.TextField、Ember.TextAreaなど) を使用する場合は、ビューでイベントをキャプチャするしかありません。したがって、コントロール ビューを拡張し、ビューでイベント ハンドラーを定義します。

// Template
<legend>Add a comment</legend>
{{view App.CommentInputField valueBinding="comment"}}

// View
App.CommentInputField = Ember.TextField.extend({ 
  focusOut: function(event) {
    this.get('controller').validateComment();
  },

  keyDown: function(event) {
    if (event.keyCode === 13) { // Enter key
      this.get('controller').createComment();
      return false;
    }
  }
});