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