¿Cuál es la ruta en EmberJS?

La ruta juega un papel importante en una aplicación de ascuas.
La ruta conecta el modelo, el controlador y la plantilla, maneja las acciones y proporciona ganchos para varias etapas del flujo.

Cómo se conectan las cosas juntas:
Conceptualmente (no necesariamente en este orden) el flujo es:

  • Cambios de URL.
  • El enrutador obtiene una nueva url y encuentra la ruta correcta que debe manejar esta url.
  • La ruta carga el modelo.
  • La ruta carga el controlador y “le da” el modelo que cargó.
  • La ruta carga la plantilla y “le da” el modelo que cargó.
  • La ruta representa la vista (que, a su vez, representa la plantilla).

(imagen tomada de smashingmagazine.com)

Acciones de manejo
Cuando una acción se envía / dispara desde una plantilla, primero va al controlador, y si no se maneja allí (o el controlador de acción en el controlador devuelve verdadero) se enviará a la ruta y aumentará la cadena de ruta si el La ruta está anidada. Esto significa que puede elegir manejar las acciones del usuario en la ruta.

Acción burbujeante:
(Imagen tomada de la documentación de Ember)

Algunos ganchos útiles en el enrutador:

  • Gancho modelo: este es el gancho más importante. Aquí es donde carga el modelo que desea.
  • setupController: esto le permite realizar algunos trabajos de inicialización en el controlador mientras se carga.
  • redirigir: esto le permite redirigir a una ruta diferente.
  • renderTemplate: esto le permite cargar cualquier plantilla que desee para esta ruta (esto anulará la implementación predeterminada de encontrar la plantilla mediante la convención de nomenclatura)
  • etc.

Recursos adicionales:
Ember.js – Enrutamiento: Introducción
Ember.js – Ember.Route
Ember.js – Plantillas: Acciones

EmberJS Marco flexible que le permite acelerar el rendimiento de su aplicación sin tener que recargar constantemente toda la página.

Nuestro tutorial en línea repasará los fundamentos de EmberJS, incluida una descripción general de Ember, la configuración de Node.JS, Ember-cli, enrutamiento, modelos, plantillas, componentes y servicios.

Aprenda el curso Ember.JS | Ember.JS Tutorial desde cero

También le enseñará cómo incorporar todas estas tecnologías para crear una aplicación de lista de tareas totalmente funcional.

Route es responsable de representar cada página cuando el usuario la llame
Tipo de mapa entre el controlador y la vista.

lo que significa que tiene una plantilla que debe llamarse cuando el usuario llama sobre la página

this.route (“acerca de”, {ruta: “/ acerca de”});
con este código, le dice a Ember.js que represente sobre Template como el primer parámetro cuando se llama a about page

this.route (“favoritos”, {ruta: “/ favs”})
El nombre de la plantilla puede ser diferente al nombre de la página aquí, le está diciendo a Ember que represente la plantilla llamada favoritos cuando el usuario solicita la página “favoritos”

this.route (“acerca de”);
dejar una ruta vacía hará coincidir el nombre de la plantilla con el nombre de la página, lo que representará cuando se solicite la página, ya que ambos tienen el mismo nombre.

Imagine que su aplicación web es una máquina expendedora.

Puede elegir productos de números del 1 al 30.

Cuando elige un producto n ° 12, el enrutador se encarga de calcular que lo que realmente desea es una lata de una sabrosa bebida de cola.

El enrutador elige una ruta adecuada para manejar su solicitud.

Ruta nr. 12 ahora se encarga de conseguirte esta deliciosa bebida.

Carga datos sobre la coca, a saber, el precio y si está disponible. Estos datos se almacenan en un modelo .

También carga un controlador y una vista .

El controlador se encarga de coordinar las cosas.

Ver describe lo que ve en la pantalla de la máquina expendedora.

Puede ver un mensaje llamando para poner un valor específico de monedas o que este producto no está disponible.

Ver decide lo que verá.

Debido a que los mensajes son muy similares y tienen formato en la vista html, se usa una plantilla .

La plantilla es lo que ves en la pantalla con todas las decoraciones necesarias.

También en la plantilla puede usar fragmentos llamados manillares .

Este código hace que sea más fácil colocar el valor de las monedas en el lugar adecuado de html dinámicamente y decidir qué mensaje se debe mostrar.

Entonces, como puede ver, el rol de la ruta está a cargo de un pequeño trabajo, darle lo que desea y tener muchos recursos para lograrlo.