Блог

У меня нет ошибок в консоли. Но консоль не регистрирует a console.log , который я ввел в конструктор top-nav.js . Но что еще более важно. Простой jumbotron div не отображается, Aurelia сообщает в консоли, что он нашел правильный top-nav.html . Вот App.html

 <template>
    <require from="bootstrap/css/bootstrap.css"></require>
    <require from="htmlreq/top-nav"></require>
    <h1>${message}</h1>
</template>
  

App.js для согласованности

 export class App {
    message = "Hello Pathways";
}
  

top-nav.html

 <template>
    <div class="jumbotron">
        <div class="container"> 
            <p>Career amp;amp; Technical Education </p>
        </div>
    </div>
</template>
  

top-nav.js оператор консоли не запускается. И Jumbotron не отображается и не указан нигде в dom.

 export class TopNav {
    _topnav = true;
    constructor() {
        console.log('constructed');
    }
}
  

Вам «требуется» пользовательский элемент, но вы его не «используете».

Вы должны сделать это:

 <template>
    <require from="bootstrap/css/bootstrap.css"></require>
    <require from="htmlreq/top-nav"></require>
    <h1>${message}</h1>

    <top-nav></top-nav>
</template>
  

compose В этом случае нет необходимости использовать.

Хорошо, похоже, что это случай для <compose> . Он «компилирует» html, и вы все равно можете выполнить некоторые привязки представления к представлению модели, если захотите. Мне нужно это на App.html вместо требования. Требовать, я думаю, больше для создания пользовательских атрибутов / тегов, а затем включения их в app.html

 <template>
    <require from="bootstrap/css/bootstrap.css"></require>
    <compose view-model="htmlreq/top-nav" view.bind="htmlreq/top-nav.html"></compose>
    <h1>${message}</h1>
</template>