ember.js - 在 Ember.js 中处理事件的最佳方式是什么？

Question

我开始学习 Ember，但不清楚处理事件的最佳、最可接受甚至预期的方法是什么。检查点击函数事件参数中的目标是否可以接受，我是否应该为需要 {{action}} 以外的事件或完全不同的事件的每个项目创建一个新 View ？

Answer 1

IMO 你应该使用 {{action}}尽可能提供帮助。如果您想在模板中的标签上附加事件，请使用 {{action}}；无需创建新 View :

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

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

上述情况的一个异常(exception)是当您想要处理特定元素上的多个事件时:

// 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 (分别显示和隐藏帖子的详细信息)，因此最好在 View 中执行此操作，避免模板中的逻辑太多。上述方法的另一种方法是使用与我们要处理的事件数量一样多的嵌套标签(在我们的例子中为 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 中:

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

但我想你会同意这更丑陋。请参阅here .

<小时/>

如果您想使用 Ember 控制 View ( Ember.TextField 、 Ember.TextArea 等)，您别无选择，只能捕获 View 中的事件。因此，您扩展控制 View 并在 View 中定义事件处理程序:

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