Aurelia Binding Click-Trigger in Navigationsleiste

Question

das folgende Layout für app.html Gegeben:

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

    <nav-bar router.bind="router"></nav-bar> 
    <div id="sidebar"><h3>This is the sidebar.</h3></div> 

    <div id="page-host" class="page-host"> 
    <router-view></router-view> 
    </div> 
</template> 

Wie binde ich an die toggleSidebar Funktion in nav-bar.html (die von app.js exportiert wird)?

<template bindable="router"> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="navbar-header"> 
     .... 

     <a class="navbar-brand" href="#" click.trigger="toggleSidebar()"> 
     <i class="fa fa-bars"></i> 
     <span>${router.title}</span> 
     </a> 
    </div> 

    .... 
    </nav> 
</template> 

Derzeit bekomme ich folgende Fehlermeldung, wenn ich auf den Link klicken toggleSidebar:

"toggleSidebar ist keine Funktion".

Answer 1

Fügen Sie in nav-bar.html eine weitere bindbare Eigenschaft für die Umschaltmethode hinzu. Bindbare Eigenschaften sind die Möglichkeit, Daten/Funktionen mit einem benutzerdefinierten Element zu teilen. Dadurch bleiben benutzerdefinierte Elemente gekapselt und portabel.

<template bindable="router,toggleSidebar"> 

Dann in app.html, binden das toggleSidebar Verfahren zum nav-Bar-Elemente:

<nav-bar router.bind="router" toggle-sidebar.call="toggleSidebar()"></nav-bar> 

Ich glaube, Sie müssen möglicherweise true von Ihrer toggleSidebar Methode zurückkehren, so dass die Standard-Aktion (nach Der Link) wird nicht abgebrochen.