Aurelia - Composants

Les composants sont les principaux éléments constitutifs du framework Aurelia. Dans ce chapitre, vous apprendrez à créer des composants simples.

Composant simple

Comme déjà discuté dans le chapitre précédent, chaque composant contient view-model qui est écrit en JavaScript, et view écrit en HTML. Vous pouvez voir ce qui suitview-modeldéfinition. C'est unES6 exemple mais vous pouvez également utiliser TypeScript.

app.js

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

Nous pouvons lier nos valeurs à la vue comme indiqué dans l'exemple suivant. ${header}la syntaxe liera le défini header valeur de MyComponent. Le même concept est appliqué pourcontent.

app.html

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

Le code ci-dessus produira la sortie suivante.

Fonctions des composants

Si vous souhaitez mettre à jour l'en-tête et le pied de page lorsque l'utilisateur clique sur le bouton, vous pouvez utiliser l'exemple suivant. Cette fois, nous définissonsheader et footer à l'intérieur EC6 constructeur 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...';
   }
}

Nous pouvons ajouter click.delegate() se connecter updateContent()fonction avec le bouton. Plus d'informations à ce sujet dans l'un de nos chapitres suivants.

app.html

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

Lorsque vous cliquez sur le bouton, l'en-tête et le contenu seront mis à jour.