javascript - Aurelia:如何在 Navbar 中绑定(bind) App 方法？

Question

我花了一些时间尝试让线路正常工作，但做不到。我不知道我做错了什么。到目前为止，我找到的关于此问题的最佳引用是 Aurelia Binding Click Trigger in Nav Bar .我尝试了这种方法，但仍然遇到同样的错误:

Uncaught Error :aurelia-binding.js:1965 (getFunction) 中的 authenticate 不是函数 (...)

这是我的设置:

导航栏.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>

应用.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>

应用.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 中获取方法以绑定(bind)到 subview 的正确设置是什么？

编辑 1:继 FabioLuz 第二条评论之后。

Answer 1

Fabio 的建议是有效的并且应该有效。您可能有其他问题阻止它运行。

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

authenticate() {
  log.info("login successful");
}

另一种猜测:

是./services/log静态对象？假设不是，则可能缺少注入(inject)。

由于您使用的是 TypeScript，autoinject可能会帮助您避免类似的陷阱。

import {autoinject, computedFrom} from "aurelia-framework";
import {AuthService, AuthenticateStep} from 'aurelia-authentication';
import {log} from "./services/log";

@autoinject()
export class App {

  authService: AuthService;
  logger: log;

  constructor(auth: AuthService, logger: log) {
    this.authService = auth;
    this.logger = logger;
  }
}

---

What is the proper setup to get a method in the App VM to bind in a subview?

我知道实现该目标的 3 种可能解决方案(可能还有更多)。我创建了一个要点来展示这些操作。

https://gist.run/?id=b9e8fee11e338e08bc5da7d4df68e2db

使用下拉菜单在导航栏实现之间切换。 :)

1。纯 HTML 元素 + bindables

这是您当前的场景。参见 nav-bar-function.html在演示中。

2。 <compose> + 继承

Composition 对某些动态场景很有用，但尽量不要过度使用它。 [Blog post]

当没有提供模型时，组合元素继承父级的 View 模型上下文。

通常我不建议在您的情况下使用它。但是，考虑到解决方案 1 的问题，您可以使用此选项进行调试。如果您使用 <compose> 遇到相同的错误同样，您可能对 App.authenticate() 有疑问功能本身。

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

<nav-bar router.bind="router" authenticate.call="authenticate()"></nav-bar>

与

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

这边，nav-bar.html表现为 App 的一部分成分。参见 nav-bar-compose.html在演示中。

3。自定义元素 + EventAggregator

您可以在组件之间使用发布/订阅通信*来避免紧耦合。相关SO答案:[Accessing Custom Component Data/Methods] , 和 [Docs]

*组件:带有 View 模型类的自定义元素

---

希望对您有所帮助! :)