Aurelia - 组件

• 

  简述

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

  简单组件

  如前一章所述，每个组件都包含view-model写在JavaScript， 和view写在HTML. 您可以看到以下内容view-model定义。它是一个ES6示例，但您也可以使用TypeScript.

  应用程序.js

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

  我们可以将我们的值绑定到视图，如下例所示。${header}语法将绑定定义的header值来自MyComponent. 相同的概念适用于content.

  应用程序.html

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

  上面的代码将产生以下输出。

  
• 

  组件功能

  如果要在用户单击按钮时更新页眉和页脚，可以使用以下示例。这次我们定义header和footer里面EC6类构造函数。

  应用程序.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()按钮的功能。更多关于这一点的内容请参见我们后续的章节。

  应用程序.html

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

  单击按钮时，将更新标题和内容。