Aurelia - Componenti

I componenti sono gli elementi costitutivi principali del framework Aurelia. In questo capitolo imparerai come creare componenti semplici.

Componente semplice

Come già discusso nel capitolo precedente, ogni componente contiene view-model che è scritto in JavaScript, e view scritto in HTML. Puoi vedere quanto segueview-modeldefinizione. È unES6 esempio ma puoi anche usare TypeScript.

app.js

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

Possiamo associare i nostri valori alla vista come mostrato nell'esempio seguente. ${header}la sintassi legherà il definito header valore da MyComponent. Lo stesso concetto è applicatocontent.

app.html

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

Il codice precedente produrrà il seguente output.

Funzioni dei componenti

Se desideri aggiornare l'intestazione e il piè di pagina quando l'utente fa clic sul pulsante, puoi utilizzare il seguente esempio. Questa volta stiamo definendoheader e footer dentro EC6 costruttore di classi.

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...';
   }
}

Possiamo aggiungere click.delegate() per connettere updateContent()funzione con il pulsante. Maggiori informazioni su questo in uno dei nostri capitoli successivi.

app.html

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

Quando si fa clic sul pulsante, l'intestazione e il contenuto verranno aggiornati.