组件是Aurelia框架的主要构建块.在本章中,您将学习如何创建简单的组件.
如前一章所述,每个组件都包含 view-model ,用 JavaScript 编写,视图用 HTML 编写.您可以看到以下视图模型定义.这是 ES6 示例,但您也可以使用 TypeScript .
export class MyComponent { header = "This is Header"; content = "This is content"; }
我们可以将值绑定到视图,如以下示例所示. $ {header} 语法将绑定 MyComponent 中定义的标题值.同样的概念适用于内容.
<template> <h1>${header}</h1> <p>${content}</p> </template>
以上代码将产生以下输出.
如果要在用户单击按钮时更新页眉和页脚,您可以使用以下示例.这次我们在 EC6 类构造函数中定义标题和页脚.
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( )按钮功能.有关详细信息,请参阅我们随后的章节.
<template> <h1>${header}</h1> <p>${content}</p> <button click.delegate = "updateContent()">Update Content</button> </template>
点击按钮后,标题和内容将会更新.