Aurelia - Componentes

Os componentes são os principais blocos de construção da estrutura Aurelia. Neste capítulo, você aprenderá como criar componentes simples.

Componente Simples

Conforme já discutido no capítulo anterior, cada componente contém view-model que está escrito em JavaScript, e view escrito em HTML. Você pode ver o seguinteview-modeldefinição. É umES6 exemplo, mas você também pode usar TypeScript.

app.js

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

Podemos vincular nossos valores à visualização, conforme mostrado no exemplo a seguir. ${header}sintaxe irá ligar o definido header valor de MyComponent. O mesmo conceito é aplicado paracontent.

app.html

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

O código acima produzirá a seguinte saída.

Funções de componente

Se você deseja atualizar o cabeçalho e o rodapé quando o usuário clica no botão, pode usar o exemplo a seguir. Desta vez, estamos definindoheader e footer dentro EC6 construtor de classe.

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 adicionar click.delegate() conectar updateContent()função com o botão. Mais sobre isso em um de nossos capítulos subsequentes.

app.html

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

Quando o botão é clicado, o cabeçalho e o conteúdo são atualizados.