Aurelia - Componentes

Los componentes son los bloques de construcción principales del marco Aurelia. En este capítulo, aprenderá a crear componentes simples.

Componente simple

Como ya se discutió en el capítulo anterior, cada componente contiene view-model que está escrito en JavaScripty view escrito en HTML. Puedes ver lo siguienteview-modeldefinición. Es unES6 ejemplo, pero también puedes usar TypeScript.

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

Podemos vincular nuestros valores a la vista como se muestra en el siguiente ejemplo. ${header}la sintaxis unirá el definido header valor de MyComponent. El mismo concepto se aplica paracontent.

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
</template>

El código anterior producirá el siguiente resultado.

Funciones de componentes

Si desea actualizar el encabezado y el pie de página cuando el usuario hace clic en el botón, puede utilizar el siguiente ejemplo. Esta vez estamos definiendoheader y footer dentro EC6 constructor de clases.

app.js

export class App{  
   constructor() {
      this.header = 'This is Header';
      this.content = 'This is content';
   }
   updateContent() {
      this.header = 'This is NEW header...'
      this.content = 'This is NEW content...';
   }
}

Podemos agregar click.delegate() para conectar updateContent()función con el botón. Más sobre esto en uno de nuestros capítulos siguientes.

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
   <button click.delegate = "updateContent()">Update Content</button>
</template>

Cuando se hace clic en el botón, el encabezado y el contenido se actualizarán.