Привязка метода spinner href в навигационной панели к модели представления для публикации сообщения для подписчика

Question

Я пытаюсь реализовать веб-приложение с помощью aurelia и машинописи. Я начал с проекта aurelia-skeleton-typescript-webpack в качестве основы. В навигационной панели я также вставил счетчик для выбора различных местоположений города, который должен вызывать метод, который в свою очередь публикует сообщение, так что в app.js подписчик должен отображать вид соответствующего города. Я реализовал представление nav-bar-spinner.html и view-model nav-bar-spinner.ts, которое создает счетчик в представлении nav-bar.html. Затем nav-bar.html вставляется в app.html в качестве шаблона. У каждого элемента счетчика есть метод, который вызывает publishLocation ('city'), который связан с моделью представления nav-bar-spinner.ts.

Теперь, когда я нажимаю на элемент счетчика, я получаю сообщение об ошибке: "Ошибка: publishNavLocation не является функцией"

У меня проблема обязательна. Я делаю пользовательские экземпляры из объекта nav-bar-spinner в app.ts.

Как я могу сделать эту привязку правильно? Буду рад за несколько советов.

Вот код:

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);
      });
  }
}

нав-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>

нав-бар-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-бар-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"

Аурелия не обрабатывает это правильно. Это имя класса, но вам нужно обратиться к нему по-другому в атрибуте HTML.

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

Это говорит Аурелии искать класс с именем NavBarSpinner,

PS Я также рекомендую вам посмотреть, как работает Aurelia Dependency Injection, у вас есть довольно много ненужного (и ложного) кода прямо сейчас.

Answer 2

Спасибо за советы. Прочитав лучше документ aurelia doc, я решил свою проблему. Вот мои изменения для машинописи:

Измененный ввод с автоинъекцией

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

и в nav-bar.html я вставил файл nav-bar-spinner.html с привязкой view-model="nav-bar-spinner"

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

и удалил другие ненужные привязки и требования.