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>

单击按钮时，页眉和内容将更新。