Qual è il modo migliore per gestire gli eventi in Ember.js?

Question

Sto iniziando a imparare Ember e non è chiaro quale sia il metodo migliore, più accettabile o addirittura previsto per gestire gli eventi. È accettabile controllare la destinazione nell'argomento dell'evento delle funzioni di clic, dovrei creare una nuova vista per ogni elemento che richiede un evento diverso da {{azione}} o qualcosa di completamente diverso?

Answer 1

IMO è possibile utilizzare l'helper {{action}} ove possibile. Se si desidera allegare eventi su un tag nel modello, utilizzare {{action}}; non c'è bisogno di fare una nuova Vista:

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

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

Un'eccezione a quanto sopra è quando si desidera gestire più di un eventi su un elemento specifico:

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

Come abbiamo bisogno di catturare sia mouseEnter e mouseLeave (per mostrare e nascondere rispettivamente i dettagli del post), è meglio farlo nella vista, evitando troppa logica nei modelli. Il modo alternativo per quanto sopra sarebbe quella di utilizzare il maggior numero di tag annidati, come il numero di eventi che vogliamo gestire (nel nostro caso, 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> 

E poi nel 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); 
    } 
}); 

Ma penso che sarete d'accordo che questo è più brutto. Vedi here.

---

Nei casi in cui si desidera utilizzare una vista di controllo Ember (Ember.TextField, Ember.TextArea, ecc) non hai scelta, ma per acquisire gli eventi nella vista. Quindi, si estende la vista di controllo e definire i gestori di eventi in Vista:

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