Thành phần Aurelia không tải chế độ xem

Question

Tôi hiện đang cố gắng tìm hiểu Aurelia Tôi đã quản lý để sử dụng aurelia-cli để thiết lập một ứng dụng cơ bản và bây giờ tôi đang cố gắng xây dựng một thành phần tùy chỉnh. Tôi có cảm giác của Aurelia mà tôi có thể thiết lập một cấu trúc như thế này:

> /app_folder 
> -- /src 
> ---- app.html (root component view) 
> ---- app.js (root component view-model) 
> ---- /components 
> ------ /my-component 
> -------- my-component.html (custom component view) 
> -------- my-component.js (custom component view-model) 

Trong app.js tôi đã được quản lý để có được thành phần của tôi để tải sử dụng thẻ <require> trong giao diện:

<require from = "./components/my-component/my-component.html"></require> 

và sau đó nói thêm rằng thẻ để xem:

<my-component /> 

này hoạt động chính xác như tôi mong đợi, tuy nhiên thành phần mà dường như được phớt lờ quan điểm mô hình.

Hiện nay xem thành phần của tôi trông như thế này:

<template> 
    <h1>${header}</h1> 
    <span>Non-dynamic data for testing</span> 
</template> 

và nó xem mô hình trông như thế này:

export class MyComponent { 
    constructor() { 
    this.header = 'Service started!'; 
    } 
} 

Khi tôi chạy ứng dụng của tôi tất cả tôi thấy là nhịp với phi dữ liệu động. Đầu ra HTML từ giao diện điều khiển trông giống như sau:

<my-component class="au-target" au-target-id="3"> 
    <h1></h1> 
    <span>Non-dynamic data for testing</span> 
</my-component> 

Ai đó có thể vui lòng tôi sẽ đi sai ở đâu?

Answer 1

Bằng cách đặt:

<require from = "./components/my-component/my-component.html"></require> 

Bạn chỉ được yêu cầu mẫu HTML. Thay đổi dòng này thành:

<require from = "./components/my-component/my-component"></require> 

Và nó sẽ hoạt động tốt.

Ngoài ra, CLI có các trình tạo tích hợp sẵn: chạy au generate element để tự động tạo mẫu mà bạn có thể dễ dàng sửa đổi.