如何在导航栏中绑定App方法

我花了一些时间试图得到这个工作正常的布线，不能。我不知道我做错了什么。到目前为止，我找到的关于这个问题的最佳参考是导航栏中的Aurelia Binding Click Trigger。我尝试了这种方法，但仍然得到相同的错误:

Uncaught Error: authenticate is not a function(…)in aurelia-binding.js:1965 (getFunction)

我的设置如下:

nav-bar.html

<template bindable="router, authenticate">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
                <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>${router.title}</span>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-main">
            <ul class="nav navbar-nav">
                <li repeat.for="row of router.navigation | authFilter: authenticated" class="${row.isActive ? 'active' : ''}">
                    <a data-toggle="collapse" data-target="#navbar-collapse-main.in" href.bind="row.href">${row.title}</a>
                </li>
            </ul>
            <ul if.bind="authenticated" class="nav navbar-nav navbar-right">
                <li>${userName}</li>
                <li><a href="/#/logout">Logout</a></li>
            </ul>
            <ul if.bind="!authenticated" class="nav navbar-nav navbar-right">
                <li><a id="loginLink" click.trigger="authenticate()">Login</a></li>
                <li>&nbsp;&nbsp;</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>

app.html

<template>
    <require from="./views/shared/nav-bar.html"></require>
    <require from="bootstrap/css/bootstrap.css"></require>
    <nav-bar router.bind="router" authenticate.call="authenticate()"></nav-bar>
    <div class="page-host">
        <div class="container-fluid">
            <router-view></router-view>
        </div>
    </div>
</template>

app.ts

import {inject, computedFrom} from "aurelia-framework";
import {Router, RouterConfiguration} from 'aurelia-router'
import {AuthService, AuthenticateStep} from 'aurelia-authentication';
import {log} from "./services/log";
@inject(AuthService)
export class App {
   authService: AuthService;
   router: Router;
   userName: string;
   constructor(auth) {
      this.authService = auth;
   }
  configureRouter(config: RouterConfiguration, router: Router) {
  config.title = 'AppName';
  config.addPipelineStep('authorize', AuthenticateStep);
  config.map([
     { route: ['', 'welcome'], name: 'welcome', moduleId: 'views/welcome', nav: true, title: 'Welcome' },
     { route: "orgTypes", name: "orgTypes", moduleId: "views/orgTypes", nav: true, auth: true, title: "Organization Types" },
     { route: "credits", name: "credits", moduleId: "views/credits", nav: true, auth: true, title: "Application Credits" }
  ]);
  this.router = router;
   }
   authenticate() {
   return this.authService.authenticate('identityServer')
     .then((response) => {
        log.info("login successful");
     });
   };

   @computedFrom('authService.authenticated')
   get authenticated() {
      return this.authService.authenticated;
   }
}

在App VM中绑定子视图的方法是什么?

编辑1:在FabioLuz的第二条评论之后