Aurelia - Komponenten

Komponenten sind die Hauptbausteine ​​des Aurelia-Frameworks. In diesem Kapitel erfahren Sie, wie Sie einfache Komponenten erstellen.

Einfache Komponente

Wie bereits im vorherigen Kapitel erläutert, enthält jede Komponente view-model was geschrieben steht in JavaScript, und view geschrieben in HTML. Sie können Folgendes sehenview-modelDefinition. Es ist einES6 Beispiel, aber Sie können auch verwenden TypeScript.

app.js.

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

Wir können unsere Werte an die Ansicht binden, wie im folgenden Beispiel gezeigt. ${header}Syntax bindet die definierte header Wert von MyComponent. Das gleiche Konzept wird angewendetcontent.

app.html

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

Der obige Code erzeugt die folgende Ausgabe.

Komponentenfunktionen

Wenn Sie die Kopf- und Fußzeile aktualisieren möchten, wenn der Benutzer auf die Schaltfläche klickt, können Sie das folgende Beispiel verwenden. Diesmal definieren wirheader und footer Innerhalb EC6 Klassenkonstruktor.

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

Wir können hinzufügen click.delegate() verbinden updateContent()Funktion mit der Taste. Mehr dazu in einem unserer folgenden Kapitel.

app.html

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

Wenn Sie auf die Schaltfläche klicken, werden die Kopfzeile und der Inhalt aktualisiert.