ナビゲーションバーのスピナーhrefメソッドをビューモデルにバインドして、サブスクライバのメッセージを公開する

Question

私はaureliaとtypescriptでWebアプリケーションを実装しようとしています。 私はaurelia-skeleton-typescript-webpackプロジェクトを基礎として始めました。 nav-barには、さまざまな都市の場所を選択するためのスピナーが挿入されています。メソッドを呼び出すと、メッセージがパブリッシュされ、app.jsのサブスクライバは対応する都市のビューを表示する必要があります。 私は、ビューNAV-内容でbar.htmlにスピナーを作成するビューナビゲーションバー-spinner.htmlとビューモデルナビゲーションバー-spinner.tsを実装しました。 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> 

ナビゲーションバー-スピナー。 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> 

ナビゲーションバー-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" 

これは、AureliaにNavBarSpinnerという名前のクラスを探すように指示します。

P.S.また、Aurelia Dependency Injectionがどのように機能するかを調べることをお勧めします。あなたは現在かなりの不必要なコードを持っています。

Answer 2

ヒントをありがとう。 aurelia docをよく読んだ後、私は私の問題を解決しました。typescriptですため ここに私の変更：

Chandedがautoinject

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

で注入し、NAV-内容でbar.htmlに私は結合ビュー・モデル=「ナビゲーションバーとナビゲーションバー-spinner.htmlを挿入-spinner "

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

を削除し、その他の不要なバインディングと要件を削除しました。