Aurelia - 元件

元件是 Aurelia 框架的主要構建塊。在本章中，您將學習如何建立簡單的元件。

簡單元件

正如在前一章中已經討論過的，每個元件包含用 JavaScript 編寫的 檢視模型 和用 HTML 編寫的 檢視。您可以看到以下 檢視模型 定義。這是一個 ES6 示例，但您也可以使用 TypeScript。

app.js

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

我們可以將我們的值繫結到檢視，如下例所示。${header} 語法將從 MyComponent 繫結定義的 header 值。content 採用相同的概念。

app.html

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

以上程式碼將產生以下輸出。

元件函式

如果您希望在使用者單擊按鈕時更新頁首和頁尾，可以使用以下示例。這一次，我們在 EC6 類建構函式中定義 header 和 footer。

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

我們可以新增 click.delegate() 以將 updateContent() 函式與按鈕連線起來。我們將在後面的章節中詳細介紹這一點。

app.html

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

單擊按鈕時，頁首和內容將更新。