Ein {wrap} bootstrap navbar in Aurelia funktioniert einfach nicht richtig

Question

Ich habe mein Problem identifiziert, ich kann einfach nicht umgehen. Ich habe ein Thema von {wrap} bootstrap bekommen, weil ich niemandes Grafikdesigner bin und in Aurelia angefangen habe, basierend auf den Navigationsskeletten.

Mein Problem ist die Navbar. Mit dem Skelett, Routen werden in app.js konfiguriert - in Ordnung, kein Problem - und verwendet dann eine

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

die navbar in einer Seite zu zerren. Das verformt das CSS, weil, wie F12 mir mitteilt, ein neues Element als Container der Navbar-Komponente im ausgegebenen HTML hinzugefügt wird. In diesem Fall ist es

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

Wie kann ich das umgehen?

Answer 1

Aureliens Mit @containerless Decorator:

Um dies zu erreichen Sie Aureliens @containerless Dekorateur verwenden werden soll. Soweit ich weiß, müssen Sie eine vollständige Komponente haben, nicht nur eine HTML-Ansicht. Wenn Sie nicht bereits eine nav-bar.js haben, ist es keine große Sache, eine zu erstellen.

Beispiel nav-bar.js:

import {containerless} from 'aurelia-framework'; 

@containerless 
export class NavBar { 
} 

Verbrauch:

Zuerst benötigen Ihre Ansicht nav-bar in der übergeordneten Ansicht, wie diese. Achten Sie darauf, nicht um die .html angeben, da Sie es für das Viewmodel aussehen wollen auch:

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

Dann weiter nach unten aus Ihrer Sicht in der richtigen Position, verwenden Sie den Element-Tag, es zu schließen.

<nav-bar></nav-bar> 

Alternative Ansatz Compose Element:

Ich habe noch nie verwendet, aber es könnte auch ein guter Ansatz sein. Gemäß this blog article von Dwayne Charrington können Sie auch das integrierte Aurelia-Element <compose> verwenden, um eine containerlose Ansicht und/oder eine Ansicht ohne das Ansichtsmodell zu importieren. Es sagt nicht explizit, dass Sie beides tun können, also nehme ich an, dass es funktionieren würde. Geben Sie es eine Chance und lassen Sie mich wissen, wenn ich diesen Antwortbeitrag aktualisieren muss.

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