Custom Elements en Aurelia

Anterior Siguiente

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.

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");
	}
}

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.

<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>

<h3 class="panel-title">${title}</h3>

</div>

${body}

</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.

<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>

<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.

<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>