A {wrap} bootstrap navbar в Aurelia просто не работает правильно

Question

Я определил свою проблему, я просто не могу найти способ обойти это. Я получил тему из {wrap} bootstrap, потому что я - никем не графический дизайнер и начал собирать ее вместе в Aurelia на основе навигационных скелетов.

Моя проблема - навигация. Используя скелет, маршруты не настроены в app.js - отлично, никаких проблем - и тогда один использует

<require from="nav-bar.html"></require> 

чтобы дергать Navbar в своей странице. Это деформирует CSS, потому что, как сообщает мне F12, новый элемент добавляется как контейнер компонента навигационного барьера в выпуске HTML. В этом случае это

<nav-bar class="au-target" router.bind="router" au-target-id="1"> 
<!-- usual bootstrap navbar stuff --> 
</nav-bar> 

Как я могу обойти это?

Answer 1

Использование Аурелии @containerless декоратора:

Для достижения этой цели вы хотите использовать @containerless декоратора Аурелии. Насколько я знаю, вам нужно иметь полный компонент, а не только HTML-представление. Если у вас еще нет nav-bar.js, не стоит создавать его.

Пример нав-bar.js:

import {containerless} from 'aurelia-framework'; 

@containerless 
export class NavBar { 
} 

Использование:

Во-первых, требуется Ваше мнение nav-bar в родительском зрения, как это. Убедитесь, что не указать .html, так как вы хотите, чтобы искать ViewModel также:

<require from="nav-bar"></require> 

Затем, далее вниз по вашему мнению, в нужном месте, используйте тег элемента, чтобы включить его.

<nav-bar></nav-bar> 

Альтернативный подход с использованием Compose Element:

Я никогда не использовал это, но это также может быть хороший подход. Согласно this blog article от Dwayne Charrington, вы также можете использовать встроенный элемент Aurelia <compose> для импорта безмасляного представления и/или представления без viewmodel. В нем явно не говорится, что вы можете сделать так, чтобы я сделал предположение, что он сработает. Сделайте снимок и дайте мне знать, если мне нужно обновить этот ответ.

<compose view="nav-bar.html" containerless></compose>