Ember.js: enlazar una acción de botón desde un # cada bucle a su propio modelo

Question

Parece que no puedo obtener un botón, generado dentro de un bucle de plantilla #each, para vincular su acción de clic a su modelo asociado. He aquí una demostración rápida del problema ...

La configuración Ember.js aplicación:

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

La plantilla:

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

El problema:

Por lo tanto, la idea en este sencillo El escenario de demostración es que el botón "Guardar" para cada registro activará una acción para guardar el estado de su propio modelo. Sin embargo, al hacer clic en el botón Guardar da un error:

Uncaught TypeError: Cannot call method 'call' of undefined 

Mi hipótesis sería que la especificación de "salvar" como la acción del botón se uniría al método save en su modelo. Sin embargo, este no parece ser el caso. Algún otro objeto parece estar manejando acciones de clic, en donde un "poder" de "guardar" no está definido. ¿Me estoy perdiendo de algo? ¿Cómo podría hacer que el botón de cada elemento de línea llame a un controlador en su propio modelo?

¡Gracias de antemano por cualquier ayuda!

Answer 1

Se puede definir un destino de una acción mediante el establecimiento de la - sorpresa - target propiedad, ver 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>​ 

El {{#with}} ayudante alrededor de la acción es necesaria porque de alguna manera el ayudante de acción no acepta this como target.

---

Pero una nota para su diseño: las acciones deben invocarse en las vistas o en un controlador. El objetivo es entonces responsable de la ejecución de otras acciones como el ahorro, ...

Así que implementaría el ejemplo de la siguiente manera, ver http://jsfiddle.net/pangratz666/U2TKJ/:

Manillar:

<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

Hay dos posibles wa ys

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

Así que cada artículo tiene su propio controlador donde el modelo es la cada elemento (en este caso la respuesta), esto es especialmente útil para algo así como una vista de entrada, donde valueBinding daría como resultado la unión de cada vista de entrada a la misma valor. Tenga en cuenta que este es el único momento en que los controladores en Ember no son únicos, y tienen diferentes ID's, si desea guardar sus valores en el controlador original, se puede obtener una referencia a través de

this.get('controller.parentController') 

dentro de su ItemController.

O se utiliza el enfoque de acción dentro de la mencionada cada bucle con

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