Was ist der beste Weg, um Ereignisse in Ember.js zu behandeln?

Question

Ich beginne zu lernen Ember und es ist nicht klar, was die beste, akzeptabelste oder sogar beabsichtigte Methode, um mit Ereignissen umzugehen ist. Ist es akzeptabel, das Ziel im Ereignisargument click functions zu überprüfen, sollte ich für jedes Element, das ein anderes Ereignis als {{action}} oder etwas völlig anderes benötigt, eine neue Ansicht erstellen?

Answer 1

IMO sollten Sie die {{action}} Helfer wo möglich verwenden. Wenn Sie Ereignisse an einem Tag in der Vorlage anhängen möchten, verwenden Sie {{action}}; keine Notwendigkeit, eine neue Ansicht zu machen:

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

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

Eine Ausnahme von der oben ist, wenn Sie mehr als eine Ereignissen auf einem bestimmten Element zu handhaben wollen:

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

Da wir beide mouseEnter erfassen müssen und mouseLeave (um die Details des Beitrags anzuzeigen bzw. zu verbergen), ist es besser, dies in der Ansicht zu tun, wobei zu viel Logik in den Vorlagen vermieden wird. Der alternative Weg für die oben würde so viele verschachtelten Tags, wie die Anzahl der Ereignisse zu nutzen, die wir behandeln möchten (in unserem Fall 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> 

Und dann in der Steuerung:

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

Aber ich denke, Sie werden mir zustimmen, dass das hässlicher ist. Siehe here.

---

In Fällen, in denen Sie Ember Steuer Ansichten (Ember.TextField, Ember.TextArea, etc.) Sie haben keine andere Wahl verwenden möchten, aber Ereignisse im Blick zu erfassen. So verlängern Sie die Steuerungssicht und definieren Sie die Event-Handler in der Ansicht:

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