Как визуализировать бритву в пользовательском элементе aurelia?

Question

Я успешно отрисовываю mvc view, когда дело доходит до рендеринга нормального класса aurelia, как показано ниже:

export class App {
  getViewStrategy() {
        return 'app';
    }
}

Как бы я отобразил мой вид бритвы при использовании базового примера пользовательского элемента: я получил nav-bar.html, который используется для визуализации моего меню, но вместо nav-bar.html я хочу использовать страницу cshtml, чтобы я мог использовать некоторые код на стороне сервера, чтобы скрыть и показать несколько элементов. Если я просто сделаю следующее

<template>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
     ....
  </nav>
</template>

И в соответствующем nav-bar.ts

import {bindable} from 'aurelia-framework';

export class NavBar {
    @bindable router;

    constructor() {

        console.info("Ctor");
    }

    bind() {
        console.info("bind");
    }

    getViewStrategy() {
        console.log('get view');
        return 'nav-bar'
    }
}

И используйте это как, в моем app.cshtml. Стоит отметить, что если я перейду с ="nav-bar" на nav-bar.cshtml и избавлюсь от файла nav-bar.ts, aurelia все время ожидает nav-bar.js, поскольку он заботится только о файлах js и html.

<template>
    <require from="nav-bar"></require>
    <require from="bootstrap/css/bootstrap.css"></require>
    <nav-bar router.bind="router"></nav-bar>
    <div class="page-host">
        <router-view></router-view>
    </div>
</template>

В этом случае мой Ctor и bind регистрируются, но получить представление не означает, что я не могу использовать представление со стороны сервера или есть ли способ обойти это?

Answer 1

Использовать @useView декоратор.

navbar.js

import { useView } from 'aurelia-framework';

@useView('navbar.cshtml')
export class NavBarCustomElement {
    // ...
}

app.html

<require from="nav-bar"></require>
<nav-bar></nav-bar>
<div class="page-host">
    <router-view></router-view>
</div>

Рабочий пример здесь: https://gist.run/?id=8f3b972d4008f07c1a11142b4b5b6e0e