Aurelia nav-bar VM(app VM) Not Working

[shivajiraot]

a property in nav-bar view is not bound to app.ts view model. This used to work earlier, but it stopped working since quite some. In the below example, testHeader from app.ts doesn't show up as nav-bar brand name. Aurelia version: latest.

app.ts:

import {Router, RouterConfiguration} from 'aurelia-router'

export class App {
  router: Router;
  testHeader: string = 'test app';

  configureRouter(config: RouterConfiguration, router: Router) {
      config.title = 'Aurelia';
    config.map([
      { route: ['', 'welcome'], name: 'welcome',      moduleId: 'welcome',      nav: true, title: 'Welcome' },
      { route: 'users',         name: 'users',        moduleId: 'users',        nav: true, title: 'Github Users' },
      { route: 'child-router',  name: 'child-router', moduleId: 'child-router', nav: true, title: 'Child Router' }
    ]);

    this.router = router;
  }
}

app.html:

<template>
  <require from="nav-bar.html"></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>

nav-bar.html:

<template bindable="router">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <i class="fa fa-home"></i>
        <span>${testHeader}</span>
      </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
          <a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1.in" href.bind="row.href">${row.title}</a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="loader" if.bind="router.isNavigating">
          <i class="fa fa-spinner fa-spin fa-2x"></i>
        </li>
      </ul>
    </div>
  </nav>
</template>

[dev-zb]

You need to bind it

<nav-bar router.bind="router" test-header.bind="testHeader"></nav-bar>
...
<template bindable="router,testHeader">
</template>

[shivajiraot]

Isn't there a way to bind entire viewmodel? like app.ts should be the viewmodel for nav-bar.

[dev-zb]

Use <compose>

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

nav-bar vm will be app.