Javascript Aurelia：如何在Navbar中绑定App方法？

我花了一些时间试着让电线正常工作，但不能。我不知道我做错了什么。到目前为止，我找到的关于这个问题的最好的参考资料是。我尝试过这种方法，但仍然得到相同的错误：

未捕获错误：身份验证不是aurelia binding.js: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>

要在应用程序VM中绑定子视图中的方法，正确的设置是什么

---

编辑1：在法比奥鲁兹的第二条评论之后。

法比奥的建议是有效的，应该有效。您可能有其他问题阻止它运行

你能像这样简化App.authenticate来检查它吗？ 只是为了排除底层可能出现的错误

鉴定{ log.infologin成功； } 另一种猜测是：

./services/log是静态对象吗？假设不是，它可能缺少注射

由于您使用的是TypeScript，自动注入可能会帮助您避免类似的陷阱

从aurelia框架导入{autoinject，computedFrom}； 从“aurelia authentication”导入{AuthService，AuthenticateTest}； 从./services/log导入{log}； @自动注入 导出类应用程序{ authService:authService； 记录器：日志； constructorauth:AuthService，logger:log{ this.authService=auth； this.logger=记录器； } } 要在应用程序VM中绑定子视图中的方法，正确的设置是什么

我知道3种可能的解决方案，可以实现更多的目标。我已经创建了一个要点来说明这些措施的实施

使用下拉列表在导航栏实现之间切换：

1.仅HTML元素+可绑定项 这是您当前的场景。请参见演示中的nav-bar-function.html

2. + 遗产 组合对于某些动态场景可能很有用，但尽量不要过度使用它

当未提供模型时，组合元素将继承父级的viewmodel上下文

通常我不建议在你的情况下使用它。但是，考虑到解决方案1的问题，您可以使用此选项进行调试。如果您也遇到相同的错误，则App.authenticate函数本身可能有问题

在您的解决方案中尝试替换

与

这样，nav-bar.html就可以作为应用程序组件的一部分。请参见演示中的nav-bar-compose.html

3.自定义元素+事件聚合器 您可以在组件*之间使用发布/订阅通信，以避免紧密耦合。相关答案：，以及

*组件：具有viewmodel类的自定义图元

---

我希望这会有帮助！：

您已声明authenticate bindable属性，但您正在使用loginLink.call=authenticate，即使loginLink正确，绑定声明也应为login-link.call=authenticate@FabioLuz试过了，但没有乐趣。loginLink是需要绑定的元素的id，在哪里可以找到应该如何定义它？谢谢在app.html中，尝试authenticate.call=authenticate，在nav-bar.html中尝试click.trigger=authenticate@FabioLuz试过了，还是没有乐趣非常感谢您的详细介绍和样品。它帮助我克服了约束问题！太棒了，我很高兴它帮助了你！

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

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;

   }

}