Aurelia - thành phần

Các thành phần là các khối xây dựng chính của khung Aurelia. Trong chương này, bạn sẽ học cách tạo các thành phần đơn giản.

Thành phần đơn giản

Như đã thảo luận trong chương trước, mỗi thành phần chứa view-model được viết bằng JavaScriptvà view viết vào HTML. Bạn có thể xem như sauview-modelĐịnh nghĩa. Nó là mộtES6 ví dụ nhưng bạn cũng có thể sử dụng TypeScript.

app.js

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

Chúng ta có thể ràng buộc các giá trị của mình với dạng xem như trong ví dụ sau. ${header}cú pháp sẽ ràng buộc header giá trị từ MyComponent. Khái niệm tương tự được áp dụng chocontent.

app.html

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

Đoạn mã trên sẽ tạo ra kết quả sau.

Chức năng thành phần

Nếu bạn muốn cập nhật đầu trang và chân trang khi người dùng nhấp vào nút, bạn có thể sử dụng ví dụ sau. Lần này chúng tôi đang xác địnhheader và footer phía trong EC6 hàm tạo lớp.

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

Chúng tôi có thể thêm click.delegate() kết nối updateContent()chức năng với nút. Thông tin thêm về điều này trong một trong những chương tiếp theo của chúng tôi.

app.html

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

Khi nút được nhấp, tiêu đề và nội dung sẽ được cập nhật.