Aurelia Binding Click Trigger in Nav Bar

Question

Given the following layout for app.html:

<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>

How do I bind to the toggleSidebar function (which is exported from app.js) in nav-bar.html?

<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>

Currently I get the following error when I click on the toggleSidebar link:

"toggleSidebar is not a function".

Answer 1

In nav-bar.html, add another bindable property for the toggle method. Bindable properties are the way to share data/functions with a custom element. This keeps custom elements encapsulated and portable.

<template bindable="router,toggleSidebar">

Then in app.html, bind the toggleSidebar method to the nav-bar element:

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

I think you may need to return true from your toggleSidebar method so that the default action (following the link) isn't canceled.