El componente Ember envía una acción a la ruta

Solución:

Para una respuesta corta, puede usar el complemento ember-route-action-helper.

<button {{action (route-action 'onButtonClick')}}>ClickToCallRouteAction</button>

Hay tres formas de comunicación de acciones,

1. Estilo de funciones clásicas de estilo antiguo es decir, pasar el nombre de la función como una cadena de arriba a abajo. y en todos los lugares necesitamos definir la misma función y proporcionar. Usar sendAction burbujear. y send burbuja de método desde el controlador hasta la jerarquía de rutas.

Esto no se recomienda. Muestra de acciones de estilo clásico twiddle

2. Acciones de cierre
Usar action función de paso de ayuda en lugar de solo cadena. para que no necesite definirlo en todas partes. ejemplo de twiddle para el estilo de las acciones de cierre

3. complemento route-action-helper
Puede llamar directamente a la acción de ruta desde cualquier lugar literalmente simplemente envolviendo funciones usando route-action ayudante.

Ejemplo de twiddle

Comparación entre el estilo clásico y el estilo de cierre y ¿Por qué es preferible el cierre?

• En estilo clásico, debe definir acciones en cada nivel y usar sendAction para activar la acción en cada nivel hasta que haya salido por completo de su anidación.
• Puede devolver valor en acciones de cierre pero no en acciones clásicas.
• Puede obtener valores en acciones de cierre, pero no en acciones clásicas.
• Las acciones de cierre fallan inmediatamente si no se encuentra la acción. pero las acciones clásicas por diseño, generarían errores perezosamente solo en los valores de invocación.
• Codificación de la complejidad, como quién manejará las acciones y hará la lógica empresarial.
• Para finalizar, puede combinar acción y ayuda mutua para establecer una propiedad con valor. onclick=(action (mut title) value="titlevalue")
• Al final, puede especificar el objeto de destino para invocar la función. (action 'save' target=session) miraría el actions hash en el session objeto en lugar del contexto actual.

Algunos de los artículos prometedores sobre esto,

– artículo de miguelcamba brasa-cierre-acciones-en-profundidad
– artículo de emberigniter enviar-cerrar-acciones-hasta-datos-propietario
– artículo de lanzamiento del blog de emberjs 1.13
– astillero – mejores-prácticas-de-brasas-detener-burbujeo-y-usar-acciones-de-cierre
– blog de Ember map ¿Por qué action helper?
– blog de Alisdair McDiarmid, las acciones de cierre de brasas tienen valores de retorno
– blog de alexdiliberto brasa-cierre-acciones

Comenzando con Ember 3.14, Octane, podemos resolver este problema de una manera moderna, explícita, concisa y clara, a la que llegaremos después de este breve intermedio:

Necesito enviar un evento a la ruta principal desde el componente secundario

Mientras esto es posible, se recomienda encarecidamente no, ya que las rutas no deben tener acciones y deben ser apátridas. Dicho esto, podemos resolver el problema de la acción que atraviesa componentes profundos de un par de formas:

• “Datos abajo, acciones arriba”
• Utilizar un servicio

Para el primero, Data Down, Actions Up, puede pasar argumentos a tantas capas de componentes como desee

// app/controllers/application.js:
@action
dance(){
  console.log('┏(-_-)┓┏(-_-)┛┗(-_- )┓')
}

// app/templates/application.hbs
<Foo @dance={{this.dance}} />

// app/components/foo.hbs
<Bar @dance={{@dance}} />

// app/components/bar.hbs
<button {{on 'click' @dance}}>Dance!</button>

Esta podría ser una pendiente resbaladiza. Si bien solo tiene dos componentes para descargar datos y acción copia de seguridad (después de un clic en este caso), puede que no parezca demasiado esfuerzo, pero muchas IU podrían tener más de 10 componentes de profundidad y se prestaría a un anti-patrón conocido como Prop-Drilling.

Mitigar perforación de hélice, tenemos otro enfoque en nuestra caja de herramientas para alcanzar. ¡Servicios!

// app/services/my-service.js
@action
dance(){
  console.log('┏(-_-)┓┏(-_-)┛┗(-_- )┓')
}

// app/components/bar.js
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class Bar extends Component {
  @service myService;
}

// app/components/bar.hbs
<button {{on 'click' this.myService.dance}}>Dance!</button>  

El componente profundamente anidado puede acceder a la acción directamente, en lugar de tener que pasar a través de algunas capas; esto conduce a un código mucho más fácil de mantener y claro.

Recursos

• Hoja de trucos de Classic a Octane
• Página de documentación de Octane Edition

---

---

Utiliza Nuestro Buscador