Lista de tareas con Aurelia

Aurelia, framework javascript

En este tutorial vamos a crear una lista de tareas con Aurelia para ver lo sencillo que es desarrollar aplicaciones utilizando este gran framework javascript.

Aurelia es un framework javascript que nos ofrece muchísima funcionalidad y todo de forma muy sencilla, con muy pocas líneas de código podemos hacer cosas increíbles.

Si tienes dudas o no conoces Aurelia, a continuación te dejo dos enlaces que te ayudarán.

Para este ejemplo vamos a crear una lista de tareas con Aurelia utilizando una clase llamada Hero, así que vamos a crear el archivo hero.js en el directorio src.


Ahora abre el archivo app.js y añade el siguiente código el cuál contiene toda la lógica que vamos a necesitar.


Como puedes ver no es más que una sencilla clase con tres métodos para obtener todos los héroes, eliminar un héroe y eliminar todos los héroes, para que todo tenga sentido abre el archivo app.html y modifica el código por el siguiente.


Si ahora lanzas la aplicación podrás ver un formulario para añadir héroes y el listado de los mismos como en la siguiente imagen.

heroes

Cómo puedes ver, la aplicación es sencilla y funciona perfectamente, pero aún la podemos mejorar y hacer que sea más reutilizable, primero vamos a crear el archivo hero-list.js y añade el siguiente código.


Ahora crea el archivo hero-list.html y añade el siguiente código, que es el trozo donde tenemos el repeat.for.


La única diferencia es que aquí utilizamos $parent.heroes en lugar de heroes, aunque no es necesario, con parent accedemos a la propiedad heroes de la clase app.

Ahora haz lo mismo con el formulario, primero crea el archivo hero-form.js.


Y mueve el html al archivo hero-form.html, recuerda que en Aurelia el html siempre debe ir dentro de los tags template.


Utilizar estos componentes en Aurelia es muy sencillo, pero mucho, simplemente abre el archivo app.html y modifica el código por el siguiente y todo seguirá funcionando de la misma forma.


Simplemente debemos utilizar las etiquetas require y hacer uso de cada componente como si fuese una nueva directiva.

Espero que te haya gustado este tutorial, en breve seguiremos viendo cosas muy interesantes sobre el potente framework javascript Aurelia.

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