ember.js - name - ember onclick

¿Cómo llamar una acción en una ruta usando acciones de cierre?

Question

Tengo la acción openModal definida en la ruta de la aplicación. Intento llamar a esta acción desde dentro de un componente.

Si utilizo la sintaxis para la acción de burbujeo:

{{my-component openModal="openModal"}}

entonces todo funciona como se espera y puedo activar esta acción usando this.sendAction("openModal") .

Sin embargo, no estoy seguro de cómo obtener el mismo resultado utilizando la nueva sintaxis de cierre:

{{my-component openModal=(action "openModal")}}

En este caso, Ember se queja de que no hay acción openModal definida en el controlador. ¿Tengo que definir esta acción en cada controlador que usa my-component ? ¿Hay alguna manera de usar de alguna manera target opción de target para decirle a Ember que esta acción está definida en una ruta? ¿Está bien mezclar la sintaxis de burbujeo y cierre en un solo componente?

Estoy usando Ember 2.0 beta 1.

Answer 1

Puede enviar acciones de cierre a la ruta proxysándolos a través del controlador. Esto funciona con cualquier versión de Ember que admita acciones de cierre. La única advertencia es que el nombre de la acción debe diferir del controlador y la ruta.

Por ejemplo, dada esta plantilla:

{{foo-component myAction=(action ''foo'')}}

Necesitarías una acción foo en tu controlador, que podría proxy a la ruta:

proxyFooTo: ''fooBar'',
actions: {
foo(context) {
this.send(''proxyFooTo'', context);
}
}

Luego en la ruta

actions: {
fooBar(context) { ... handle fooBar ... }
}

Answer 2

Hasta que los componentes enrutables se introduzcan en algún lugar de Ember 2.1 o 2.2 o 2.3 o 2.4 o 2.5 o 2.6 o 2.7, es imposible pasar una acción de cierre desde una ruta.

Por ahora, solo puede pasar acciones de cierre desde un controlador a componentes secundarios.

UPD: Miko Paderes insinúa que hay un complemento disponible: https://github.com/dockyard/ember-route-action-helper

Answer 3

También es posible evitar crear un controlador, o si ya hay uno que evita agregar más lógica en él, especificando la propiedad de destino

http://emberjs.jsbin.com/fiwokenoyu/1/edit?html,js,output

en ruta o en camino

js

setupController(controller,model){
this._super(...arguments);
controller.set(''theRoute'', this);
},
actions:{
openModal(data){
/*...*/
}
}

en plantilla

HBS

{{my-component openModalAction=(action ''openModal'' target=theRoute)}}

Answer 4

Prueba esto:

{{my-component openModal=(action send "openModal")}}

... que hace uso del método de envío en el controlador.

No puedo decir que lo entiendo completamente, dado que el segundo argumento para send es el context pero todavía está pasando argumentos adicionales a mi acción en la ruta correctamente. Actualmente estoy usando la versión 2.4.5 .

Answer 5

Pruebe el complemento Ember llamado ember-route-action-helper,

https://github.com/dockyard/ember-route-action-helper

Puede reemplazar route-action con action en el momento en que estén disponibles los "componentes enrutables".

{{todo-list todos=model addTodo=(route-action "addTodo")}}

Entonces, el código anterior tiene un efecto similar al

Dentro de la ruta,

setupController(controller,model){
this._super(...arguments);
controller.set(''theRoute'', this);
},
actions:{
addTodo(data){
/*...*/
}
}

Dentro de HBS,

{{todo-list addTodo=(action ''addTodo'' target=theRoute)}}