Ember.js में ईवेंट को संभालने का सबसे अच्छा तरीका क्या है?

Question

मैं एंबर जानने के लिए शुरू कर रहा हूँ और यह स्पष्ट नहीं है क्या घटनाओं को संभालने के लिए सबसे अच्छा, सबसे स्वीकार्य, या यहाँ तक कि इरादा तरीका है। क्या क्लिक फ़ंक्शन इवेंट तर्क में लक्ष्य की जांच करना स्वीकार्य है, क्या मुझे प्रत्येक आइटम के लिए एक नया दृश्य बनाना चाहिए जिसके लिए {{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 (दिखाने के लिए और क्रमशः पद का ब्यौरा छिपाने के लिए), यह दृश्य में यह करने के लिए, टेम्पलेट्स में बहुत ज्यादा तर्क से बचने के लिए बेहतर है। इसके बाद के संस्करण के लिए वैकल्पिक तरीका घटनाओं हम हैंडल करना चाहते हैं की संख्या के रूप में कई नेस्टेड टैग का उपयोग किया जाएगा (हमारे मामले में, 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; 
    } 
    } 
});