将导航栏中的微调器 href 方法绑定到视图模型以向订阅者发布消息

Question

我正在尝试使用 aurelia 和 TypeScript 实现一个 Web 应用程序。 我从 aurelia-skeleton-typescript-webpack 项目开始作为基础。

在导航栏中，我还插入了一个用于选择不同城市位置的微调器，它应该调用一个方法，该方法又发布一条消息，以便在 app.js 中订阅者应该显示相应城市的视图。

我已经实现了视图 nav-bar-spinner.html 和视图模型 nav-bar-spinner.ts，它在视图 nav-bar.html 中创建了微调器。 nav-bar.html 然后作为模板插入到 app.html 中。 每个微调项都有一个调用 publishLocation('city') 的方法，它与视图模型 nav-bar-spinner.ts.

绑定

现在，当我点击微调项时，我收到错误消息：

“错误：publishNavLocation 不是函数”

我的事情是一个绑定问题。我从 app.ts.

中的对象 nav-bar-spinner 进行自定义实例化

我怎样才能正确执行此绑定？ 我很乐意提供一些提示。

这里的代码：

app.html

<template>
  <require from="nav-bar.html"></require>
  
  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <div class="row">
       <router-view swap-order="after" class="col-md-12"></router-view> 
    </div>
  </div>

</template>

app.ts

import {Redirect} from 'aurelia-router';
import {Router, RouterConfiguration} from 'aurelia-router';
import {EventAggregator} from 'aurelia-event-aggregator';
import {inject} from 'aurelia-framework';
import {NavBarSpinner} from './nav-bar-spinner';

@inject(EventAggregator)
export class App 
{
    
  navBarSpinner;

  constructor(private ea: EventAggregator) 
  {
      this.navBarSpinner = new NavBarSpinner('hello world')
  }

  router : Router;

  configureRouter(config: RouterConfiguration, router: Router) 
  {
    config.title = 'bbv AmbientMonitor';
    config.map([
      { route: '',                name: 'login',           moduleId: './login',            nav: true,  title: 'Anmeldung' },
      { route: 'live-view-all',   name: 'live-view-all',   moduleId: './live-view-all',    nav: true,  title: 'Live-Ansicht' },
      { route: 'live-view-zg',    name: 'live-view-zg',    moduleId: './live-view-zg',     nav: true,  title: 'Live-Ansicht' },
      .
      .
      .
      .
      .
      .
      { route: 'historical-view', name: 'historical-view', moduleId: './historical-view',  nav: true,  title: 'Historie-Ansicht'}
    ]);

    this.router = router;
  }
  
  attached() 
  {
      this.ea.subscribe('nav::toggleLogin', (data) => 
      {
        console.log('Subscribe data is: ' + data.nav);
        this.router.navigateToRoute(data.nav);
      });
  }
}

nav-bar.html

<template bindable="router">
    <require from="./nav-bar-spinner"></require>
        <!-- <require from="nav-bar-spinner.html"></require> -->
      <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="#skeleton-navigation-navbar-collapse">
            <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="skeleton-navigation-navbar-collapse">
        
          <ul class="nav navbar-nav">
            <div class="pull-left">
              <compose class="nav navbar-nav" view="nav-bar-spinner.html" view-model.bind="navBarSpinner"></compose>
            </div>
            <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
              <a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.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>

nav-bar-spinner.html

<template bindable="navBarSpinner">
    <li class="dropdown">
    <div as-element="compose" view-model.bind="navBarSpinner"></div>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Standort <span class="caret"></span></a>
      <ul class="dropdown-menu">
            <li><a href="#" click.trigger="publishNavLocation('live-view-zg')">Zug</a></li>
            <li><a href="#" click.trigger="publishNavLocation('live-view-zh')">Zürich</a></li>
            <li><a href="#" click.trigger="publishNavLocation('live-view-be')">Bern</a></li>
            <li><a href="#" click.trigger="publishNavLocation('live-view-lu')">Luzern</a></li>
            <li><a href="#" click.trigger="publishNavLocation('live-view-mu')">München</a></li>
      </ul>
    </li>
</template>

nav-bar-spinner.ts

import { EventAggregator } from 'aurelia-event-aggregator';
import { inject } from 'aurelia-framework';
import { View } from "aurelia-framework";

@inject(EventAggregator)
export class NavBarSpinner {
    
    ea;

    constructor(msg) {
        this.ea = new EventAggregator();
    }

    publishNavLocation(navToCity) {
        this.ea.publish('nav::toggleLogin', {nav: navToCity});
        console.log("Method call publishLocationZug()");
    }
}

Answer 1

您的问题在于以下行：

view-model.bind="navBarSpinner"

Aurelia 没有正确处理这个。它是类的名称，但您需要在 HTML 属性中对它进行不同的处理。

view-model.bind="nav-bar-spinner"

这告诉 Aurelia 寻找名为

NavBarSpinner

的类。

附言我还建议你看看 Aurelia 依赖注入是如何工作的，你现在有很多不必要的（和错误的）代码。

Answer 2

感谢您的提示。在更好地阅读 aurelia 文档后，我解决了我的问题。 这是我对打字稿的更改：

Chanded 自动注射

import { autoinject } from 'aurelia-framework';`
-
-
-
@autoinject( EventAggregator )
export class NavBarSpinner {
    constructor(private ea: EventAggregator) {}
-
-
-

在 nav-bar.html 中，我插入了带有绑定 view-model="nav-bar-spinner" 的 nav-bar-spinner.html

<div class="pull-left">
  <compose class="nav navbar-nav" view-model="nav-bar-spinner"></compose>
</div>

并删除了其他不必要的绑定和要求。