Compose en Aurelia, interfaces dinámicas

Aurelia, framework javascript

En Aurelia tenemos el elemento compose para crear interfaces dinámicas, para entender cómo funciona compose en Aurelia vamos a crear un ejemplo donde tendremos un array de equipos, equipos de fútbol, de balonmano y de basket, todos son equipos y tienen muchas cosas en común, pero finalmente cada deporte es distinto.

Por lo tanto, cada tipo de equipo puede tener un view-model y un view asociados para implementar la lógica de cada uno de ellos, aquí es donde entra en juego compose en Aurelia, ya que entre otras muchas cosas, nos permite definir un view-model y un view de forma dinámica con un sencillo atributo, view-model, al cuál le tenemos que pasar la ruta del view-model.

Enlaces que te pueden interesar:

Primero vamos a crear unos pocos de datos para poder mostrar información, así que abre el archivo app.js y añade modifica el código por el siguiente.


Ahora que tenemos unos pocos equipos, veamos lo sencillo que es utilizar compose en Aurelia, así que abre el archivo app.html y modifica el código por el siguiente.


Simplemente utilizamos compose y dos atributos, model.bind, gracias al cuál después podremos acceder al equipo en su respectivo view-model, y view-model, al cuál le pasamos la ruta del view-model sin la extensión, es decir, debemos crear tres view-models con sus respectivas vistas dentro del directorio src/teams, football, handball y basketball, así que crea sus respectivos archivos y abre, por ejemplo, teams/football y añade el siguiente código.


Así de sencillo es recuperar cada uno de los equipos, aquí tienes más información acerca del ciclo de vida de una petición, ahora sólo nos queda definir el archivo teams/football.html.


Ahora sólo te queda crear el resto de archivos y la aplicación funcionará perfectamente. De esta forma tan sencilla podemos cargar view-models de forma dinámica con Aurelia.

Añade un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies
PHP 7, React Native, Angular, Ionic, Vue.js 2 y mucho más, aprende todo desde 0 con nuestros cursos ahoraVer cursos