Custom Elements en Aurelia Javascript Framework

Aurelia, framework javascript

Los custom elements en Aurelia nos permiten extender el DOM con nuevos elementos, para este ejemplo vamos a ver cómo podemos crear un nuevo elemento del DOM llamado custom-panel y asociarle una serie de parámetros que seamos capaces de capturar tanto en la vista como en la clase del elemento utilizando el decorador @bindable.

Gracias a los custom elements en Aurelia podemos crear nuevos elementos html de forma dinámica y reutilizarlos en cada zona que necesitemos con muy pocas líneas de código.

Enlaces que te pueden interesar:

Nuestro primer Custom Element con Aurelia

Crea un directorio llamado elements y dentro un archivo llamado custompanel.js con el siguiente código.


Los custom elements en Aurelia trabajan de la misma forma que los componentes, (view-model, view), es decir, tienen un modelo y una vista.

Como le hemos dicho que debe utilizar la vista elements/panel.html, vamos a crearla y le añadimos el siguiente código html, el cuál hace uso de las propiedades bindable de la clase.


Cómo puedes ver es muy sencillo, pero nos podemos hacer una idea de lo que podemos conseguir.

Utilizar nuestro nuevo elemento es muy sencillo, simplemente debemos añadir el siguiente código para que los paneles sean pintados.


Cómo puedes ver, creamos tres paneles utilizando las clases de bootstrap, pero aún podemos hacer todo esto mucho más dinámico, añade el siguiente código debajo del último panel y mira el resultado.


Gracias al atributo ref podemos hacer databinding entre nuestro elemento y la actual template, el resultado es el siguiente.

customelementsaurelia

Así de sencillo es crear custom elements en Aurelia, te invito a revisar la documentación y los enlaces que he dejado al inicio del tutorial.

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