2012-06-01 21 views
5

के लिए एक #each पाश से एक बटन कार्रवाई बाइंडिंग मैं एक बटन, एक #each टेम्पलेट पाश के भीतर उत्पन्न प्राप्त करने के लिए, उसके संबंधित मॉडल के लिए अपने क्लिक कार्रवाई के लिए बाध्य नहीं कर पा रहे। यहाँ समस्या की एक त्वरित प्रदर्शन है ...Ember.js - अपने स्वयं के मॉडल

Ember.js ऐप सेटअप:

window.Contacts = Ember.Application.create(); 

Contacts.Person = Ember.Object.extend({ 
    first: '', 
    last: '', 
    save: function() { 
     // send updated information to server. 
    } 
}); 

Contacts.contactsList = Ember.ArrayController.create({ 
    content:[], 
    init: function() { 
     this.pushObject(Contacts.Person.create({ 
      first:'Tom', 
      last:'Riddle' 
     })); 
    } 
}); 

टेम्पलेट:

<script type="text/x-handlebars"> 
    {{#each Contacts.contactsList}} 
    <li> 
     {{view Ember.TextField valueBinding="first" viewName="firstname"}} 
     {{view Ember.TextField valueBinding="last" viewName="lastname"}} 
     <button {{action "save" on="click"}}>Save</button> 
    </li> 
    {{/each}} 
</script> 

समस्या:

तो, यह सरल में विचार डेमो परिदृश्य यह है कि प्रत्येक रिकॉर्ड के लिए "सहेजें" बटन अपने स्वयं के मॉडल की स्थिति को बचाने के लिए एक क्रिया को ट्रिगर करेगा। हालांकि, सहेजें बटन पर क्लिक एक त्रुटि देता है:

Uncaught TypeError: Cannot call method 'call' of undefined 

मेरे धारणा होगा कि निर्दिष्ट करने "बचाने" के रूप में बटन की कार्रवाई अपने मॉडल पर save विधि के लिए यह बाँध होगा। हालांकि, यह मामला प्रतीत नहीं होता है। कुछ अन्य ऑब्जेक्ट क्लिक क्रियाओं को संभालने के लिए प्रतीत होता है, जिसमें एक "सेव" हैंडर अपरिभाषित है। क्या मुझसे कोई चूक हो रही है? मैं प्रत्येक लाइन आइटम के बटन को अपने मॉडल पर एक हैंडलर कैसे कॉल कर सकता हूं?

किसी भी मदद के लिए अग्रिम धन्यवाद!

उत्तर

10

आप की स्थापना करके एक कार्रवाई का लक्ष्य निर्धारित कर सकते हैं - आश्चर्य - target संपत्ति, http://jsfiddle.net/pangratz666/FukKX/ देखें:

<script type="text/x-handlebars" > 
    {{#each Contacts.contactsList}} 
    <li> 
     {{view Ember.TextField valueBinding="first" viewName="firstname"}} 
     {{view Ember.TextField valueBinding="last" viewName="lastname"}} 
     {{#with this as model}} 
      <button {{action "save" target="model"}}>Save</button> 
     {{/with}} 
    </li> 
    {{/each}} 
</script>​ 

कार्रवाई के आसपास {{#with}} सहायक की जरूरत है क्योंकि किसी भी तरह कार्रवाई सहायक this एक के रूप में स्वीकार नहीं करता है target


लेकिन आपके डिजाइन के लिए एक नोट: कार्यों को विचारों या नियंत्रक पर बुलाया जाना चाहिए। लक्ष्य तो, बचत की तरह आगे क्रियाओं को क्रियान्वित करने के लिए जिम्मेदार है ... इस प्रकार

तो मैं अपने उदाहरण को लागू होता है, को देखने के http://jsfiddle.net/pangratz666/U2TKJ/:

Handlebars:

<script type="text/x-handlebars" > 
    {{#each Contacts.contactsList}} 
    <li> 
     {{view Ember.TextField valueBinding="first" viewName="firstname"}} 
     {{view Ember.TextField valueBinding="last" viewName="lastname"}} 
     <button {{action "save" target="Contacts.contactsController" }}>Save</button> 
    </li> 
    {{/each}} 
</script>​ 

जावास्क्रिप्ट:

Contacts.contactsController = Ember.Object.create({ 
    save: function(event) { 
     console.log('do something with: ', event.context); 
    } 
}); 
+0

दूसरा दृष्टिकोण के साथ एक पाश के अंदर उल्लेख कार्रवाई दृष्टिकोण का उपयोग मुझे मदद करता है! – Franco

+0

वैश्विक लुकअप को बहिष्कृत किया गया है – Sisir

2

दो संभव वा रहे हैं वाईएस

{{#each answer in effort_reasons itemController="module_answer"}} 
{{/each}} 

इसलिए प्रत्येक आइटम अपने स्वयं के नियंत्रक हो जाता है, जहां मॉडल प्रत्येक आइटम है (इस मामले में जवाब), यह विशेष रूप से है एक इनपुट दृश्य जहां valueBinding ही के लिए हर इनपुट व्यू बंधन में परिणाम होगा की तरह कुछ के लिए उपयोगी मूल्य। ध्यान दें कि यह केवल समय जहां एंबर में नियंत्रकों एकमात्र नहीं हैं, और विभिन्न ID's कर रहे हैं, अगर आप आप के माध्यम से

this.get('controller.parentController') 

अपने itemController अंदर एक संदर्भ प्राप्त कर सकते हैं मूल नियंत्रक में अपने मूल्यों को बचाने के लिए चाहते हैं।

या आप

{{action "actionname" parameter paramter2...}} 
संबंधित मुद्दे