Ember.js - привязка действия кнопки из цикла #each к собственной модели

Question

Я не могу получить кнопку, сгенерированную в цикле шаблона #each, чтобы связать действие click с его ассоциированной моделью. Вот краткий демо проблемы ...

Установка 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 методу на его модели. Однако, похоже, это не так. Похоже, что какой-то другой объект обрабатывает действия кликов, в которых «хранитель» не определен. Я что-то упустил? Как я могу сделать, чтобы кнопка каждой позиции вызывала обработчик на собственной модели?

Заранее благодарим за любую помощь!

Answer 1

Вы можете определить цель действия, установив - сюрприз - 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/:

Рули:

<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

Есть две возможности wa YS

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

Таким образом, каждый Пункт получает свой собственный контроллер, где модель является каждым элементом (в данном случае ответе), это особенно полезно для что-то вроде Input View, где valueBinding приведет к связыванию каждого вида входного сигнала на то же стоимость. Обратите внимание, что это единственный раз, когда контроллеры Эмбер не одиночек, и имеющие разные ID's, если вы хотите, чтобы сохранить значения в исходном контроллере вы можете получить ссылку с помощью

this.get('controller.parentController') 

внутри вашего itemController.

Или использовать упомянутый подход действий внутри каждого цикла с

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