Question

我在控制台中没有错误。但是控制台没有记录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; Technical Education </p>
        </div>
    </div>
</template>

top-nav.js控制台语句未触发。并且在大教堂的任何地方都没有显示Jumbotron。

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

Answer 1

您“需要”自定义元素，但您并未“使用”它。

你应该这样做：

var arr = ["hello", "", ""];

var result = arr.filter(x => x !== "").length;

if (result === 1) console.log("exactly one is not empty");

在这种情况下无需使用<template> <require from="bootstrap/css/bootstrap.css"></require> <require from="htmlreq/top-nav"></require> <h1>${message}</h1> <top-nav></top-nav> </template>。

Answer 2

好的，这似乎是<compose>的情况。它“组合”了html，如果你愿意，你仍然可以做一些视图模型视图绑定业务。我需要在App.html而不是require上使用它。我认为，需要创建自定义属性/标记，然后将其包含在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>

Aurelia要求html导入不起作用

2 个答案: