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:
- Aurelia/Discuss, Chat para desarrolladores de Aurelia
- Aurelia, un gran framework javascript
- Crear una aplicación con Aurelia
- Lista de tareas con Aurelia
- Rutas en Aurelia Javascript Framework
- Inyección de dependencias en Aurelia
Nuestro primer Custom Element con Aurelia
Crea un directorio llamado elements y dentro un archivo llamado custompanel.js con el siguiente código.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import {customElement, useView, bindable} from 'aurelia-framework'; //nombre del elemento en la vista <custom-panel></custom-panel> @customElement('custom-panel') //vista que vamos a utilizar, por si queremos cambiar la ruta @useView("elements/panel.html") export class CustomPanel { //propiedad type para hacer databinding @bindable type; //propiedad title para hacer databinding @bindable title; //propiedad body para hacer databinding @bindable body; //si dispará cada que el valor de la propiedad type cambia, contiene el valor anterior y el nuevo typeChanged(oldValue, newValue) { console.log("Old: " + oldValue, "New: " + newValue); } //si dispará cada que el valor de la propiedad title cambia, contiene el valor anterior y el nuevo titleChanged(oldValue, newValue) { console.log("title changed"); } //si dispará cada que el valor de la propiedad body cambia, contiene el valor anterior y el nuevo bodyChanged(oldValue, newValue) { console.log("body changed"); } } |
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.
1 2 3 4 5 6 7 8 9 10 | <template> <div class="panel panel-${type}"> <div class="panel-heading"> <h3 class="panel-title">${title}</h3> </div> <div class="panel-body"> ${body} </div> </div> </template> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <template> <require from="./elements/custompanel"></require> <require from="bootstrap/css/bootstrap.css"></require> <custom-panel class="col-lg-4" type.bind="'default'" title.bind="'Panel Default'" body.bind="'Body default'"> </custom-panel> <custom-panel class="col-lg-4" type.bind="'primary'" title.bind="'Panel Primary'" body.bind="'Body danger'"> </custom-panel> <custom-panel class="col-lg-4" type.bind="'info'" title.bind="'Panel Info'" body.bind="'Body Info'"> </custom-panel> </template> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="col-md-9 col-md-offset-3"> <div class="form-group row"> <div class="col-md-3"> <input type="text" class="form-control" ref="type" placeholder="Type"> </div> <div class="col-md-3"> <input type="text" class="form-control" ref="title" placeholder="Value"> </div> <div class="col-md-3"> <input type="text" class="form-control" ref="body" placeholder="Body"> </div> </div> </div> </div> <custom-panel class="col-lg-6 col-lg-offset-3" type.bind="type.value" title.bind="title.value" body.bind="body.value"> </custom-panel> |
Gracias al atributo ref podemos hacer databinding entre nuestro elemento y la actual template, el resultado es el siguiente.
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.
