Aurelia - 组件

组件是Aurelia框架的主要构建块.在本章中，您将学习如何创建简单的组件.

简单组件

如前一章所述，每个组件都包含 view-model ，用 JavaScript 编写，视图用 HTML 编写.您可以看到以下视图模型定义.这是 ES6 示例，但您也可以使用 TypeScript .

app.js

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

我们可以将值绑定到视图，如以下示例所示. $ {header} 语法将绑定 MyComponent 中定义的标题值.同样的概念适用于内容.

app.html

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

以上代码将产生以下输出.

组件函数

如果要在用户单击按钮时更新页眉和页脚，您可以使用以下示例.这次我们在 EC6 类构造函数中定义标题和页脚.

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>

点击按钮后，标题和内容将会更新.