Компонент Aurelia не загружает view-model

Question

В настоящее время я пытаюсь изучить Aurelia. Мне удалось использовать aurelia-cli для создания базового приложения, и теперь я пытаюсь создать пользовательский компонент. У меня было впечатление Aurelia, что я мог бы создать структуру, как это:

> /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) 

В app.js я сумел получить мой компонент для загрузки с помощью <require> тега в представлении:

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

, а затем добавил, что тег к мнению:

<my-component /> 

Это работает точно так же, как я ожидал, однако, что компонент, кажется, не обращая внимания на вид-модель.

В настоящее время мой компонент вид выглядит следующим образом:

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

и это вид-модель выглядит следующим образом:

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

Когда я запускаю мое приложение все, что я вижу, это промежуток с не- динамические данные в. Вывод HTML с консоли выглядит так:

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

Может кто-нибудь угодить te Будь я ошибаюсь?

Answer 1

Поставив:

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

Вы только требуют шаблон HTML. Измените эту строку на:

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

И он должен работать нормально.

Кроме того, CLI имеет встроенные генераторы: запустите au generate element, чтобы автоматически создать шаблон, который вы можете легко изменить.