Ember.js'de olayları işlemenin en iyi yolu nedir?

Question

Ember'i öğrenmeye başladım ve olayları ele almak için en iyi, en kabul edilebilir ve hatta amaçlanan yöntemin ne olduğu net değil. Tıklama işlevleri etkinlik argümanında hedefi kontrol etmek kabul edilebilir mi, {{action}} dışında bir etkinlik gerektiren her bir öğe için veya tamamen farklı bir şey için yeni bir görünüm oluşturmalı mıyım?

Answer 1

IMO, mümkünse {{action}} yardımcı programını kullanmalısınız. Şablonda bir etikete etkinlik eklemek istiyorsanız, {{action}}; gerek yeni görünümü yapmak için:

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

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

Belirli bir eleman birden fazla olaylarını işlemek istediğinizde yukarıdaki duruma bir istisna oluşturur: ikimiz de mouseEnter yakalamanız gerekir gibi

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

ve mouseLeave (sırasıyla, gönderinin ayrıntılarını göstermek ve gizlemek için), Şablonda çok fazla mantıktan kaçınarak, Görünümde bunu yapmak daha iyidir. Yukarıdaki alternatif yolu biz idare istediğiniz etkinliklerin sayısı kadar iç içe etiketleri kullanmak olacaktır (bizim durumumuzda, 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> 

Sonra denetleyicisi:

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

Ama bence bunun daha çirkin olduğunu kabul edeceksiniz. Bkz here. Eğer görünümünde olayları yakalamak için ama çarem yok (vb Ember.TextField, Ember.TextArea,) Kor kontrol görünümleri kullanmak istediğiniz durumlarda

---

. Yani görünümünde olay işleyicileri denetim görünümünü genişletmek ve tanımlayın:

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