在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（分别显示和隐藏帖子的详细信息），最好在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 
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.TextField，Ember.TextArea等），你别无选择，只能捕捉到在观看赛事的情况。 FYI

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