Ember.js - Bir #each döngüsünden bir düğmenin eylemini kendi modeline bağlama

Question

Tıklat eylemini ilişkili modeline bağlamak için #each şablon döngüsünde oluşturulan bir düğme göremiyorum. İşte sorunun hızlı bir demo ... var

Ember.js uygulama kurulumu:

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

şablonu:

<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> 

sorun: Bu basit

Yani, fikir, demo senaryosunda, her kayıt için "Kaydet" butonu, kendi modelinin durumunu kaydetmek için bir eylemi tetikleyecektir. Ancak, Kaydet düğmesini tıklayarak bir hata veriyor:

Uncaught TypeError: Cannot call method 'call' of undefined 

Benim varsayım düğmenin eylemi kendi modeline save yöntemine bağlamak gibi belirterek "kaydet" olurdu. Ancak, bu durum böyle görünmemektedir. Diğer bazı nesneler, "kaydetme" işleyicisinin tanımlanmamış olduğu tıklama eylemlerini ele alıyor gibi görünüyor. Burada bir şey mi eksik? Her bir satır öğesinin düğmesi kendi modelinde bir işleyiciyi nasıl arayabilir?

Yardımlarınız için şimdiden teşekkür ederiz!

Sen ayarlayarak bir eylemin bir hedefi tanımlayabilirsiniz

Answer 1

- Sürpriz - target özelliği, http://jsfiddle.net/pangratz666/FukKX/ bkz:

nasılsa eylem yardımcı bir şekilde this kabul etmez çünkü

<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>​ 

eylem etrafında {{#with}} yardımcı gereklidir target.

---

Tasarımınıza bir not: eylemler görünümlere veya denetleyiciye çağrılmalıdır.

Gidon: Hedef

yüzden http://jsfiddle.net/pangratz666/U2TKJ/ aşağıda belirtilen şekilde bir örneğini uygulamak görecekti ..., tasarruf gibi başka eylemleri yürütmek için o sorumludur

<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>​ 

JavaScript:

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

Answer 2

İki olası wa var. Model her öğe (bu durumda yanıtında) olduğu ys

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

Yani her Öğe bu özellikle olduğunu valueBinding aynı her giriş görünümü bağlayıcı olmasına neden olan bir giriş View gibi bir şey için kullanılan yaklaşımlar, kendi kontrolörü alır değer. Bu Ember'dan içinde kontrolörler singletons değildir ve size itemController içine

this.get('controller.parentController') 

aracılığıyla başvuruda bulunabilirsiniz orijinal kumanda içinde değerleri kaydetmek istiyorsanız, farklı ID's yaşıyorsanız tek zaman unutmayın.

Yoksa

{{action "actionname" parameter paramter2...}}