Aurelia - カスタムエレメントのトラブル

Question

初心者。

私は2つのカスタム要素を持っているapp.htmlを持っている：

<template> 
    <require from="../navmenu/navmenu.html"></require> 
    <require from="./app.css"></require> 
    <!--We want the nav bar to span the page--> 
    <div class="container-fluid"> 
     <navmenu router.bind="router"></navmenu> 
    </div> 
    <!--We want the media to centre so we use just container--> 
    <div class="container"> 
     <div className='col-sm-12'> 
      <div className='row'> 
       <router-view></router-view> 
      </div> 
     </div> 
    </div> 
</template> 

ルータがnavmenuに結合するので、私は、ルーティングを持っています。

私は、拡張子.htmlをして次のことを必要としているので：私は私のviewmodelへのアクセスを持っていない

<require from="../navmenu/navmenu.html"></require> 

。

.htmlを削除してrequireを変更すると、すべてのナビゲーションバーの項目が緩くなります。

私navbar.tsは次のとおりです。

import { autoinject, bindable, bindingMode } from "aurelia-framework"; 
import { LoggedInService } from "../components/auth/LoggedInService"; 
import { customElement } from "aurelia-templating"; 

@autoinject 
@customElement('navmenu') 
export class Navmenu { 

    @bindable public isLoggedIn: boolean = false; 
    @bindable public userName: string = 'anonymous'; 

    constructor(public loggedInService: LoggedInService) { 
     this.isLoggedIn = loggedInService.isAuthenticated(); 
     this.userName = loggedInService.getUserName(); 
    } 
} 

は、私が使用したい二つの変数に「@binding」を追加したが、私はそれらにアクセスできません。私はカスタム要素のガイドを見ましたが、インポートする必要があることを示しています

どのようにこれらの変数にアクセスするには、Navbar項目を壊さないでください。または..

ビューが ".html"で参照されている場合、navmenuビューモデルにアクセスするにはどうすればよいですか。ここで

は私navmenu.htmlです：

<template bindable="router"> 
    <require from="./navmenu.css"></require> 
    <div class="main-nav"> 
     <div class="navbar navbar-inverse"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="#/home">Jobsledger.API</a> 
      </div> 
      <div class="navbar-collapse collapse"> 

       <ul class="nav navbar-nav"> 

        <li repeat.for="row of router.navigation" class="${ row.isActive ? 'link-active' : '' }"> 
         <a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a> 

         <a href.bind="row.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" 
          if.bind="row.settings.nav"> 
          ${row.title} 
          <span class="caret"></span> 
         </a> 

         <ul if.bind="row.settings.nav" class="dropdown-menu"> 
          <li repeat.for="menu of row.settings.nav"> 
           <a href.bind="menu.href">${menu.title}</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    LoggedIn Value: ${ isLoggedIn } 
</template> 

Answer 1

あなたは

<require from="../navmenu/navmenu"></require>

として、あなたのナビゲーションバーをロードしてからbindable="router"を削除

import { autoinject, bindable, bindingMode } from "aurelia-framework" 
import { LoggedInService } from "../components/auth/LoggedInService" 
import { Router } from 'aurelia-router' 

@autoinject 
export class NavMenu { 
    loggedInService: LoggedInService 
    router: Router 

    @bindable isLoggedIn: boolean = false 
    @bindable userName: string = 'anonymous' 

    constructor(loggedInService: LoggedInService, router: Router) { 
     this.isLoggedIn = loggedInService.isAuthenticated() 
     this.userName = loggedInService.getUserName() 
     this.router = router 
    } 
} 

をViewModelにするために、ルーターを注入する必要があります<template>タグ

@bindableあなたのビューモデルではRouterを注入する必要はありませんが、これはあなたのためにうまくいけば試してみることです。

Answer 2

javascriptを使用する場合は、ビューモデルをインポートする必要があります。そのため、<require from="../navmenu/navmenu"></require>を使用するのが正しい方法です。

@bindable()の意味を誤解していると思います。

<navmenu username.bind="user.name"></navmenu> 

あなたのviewmodelにpublicとして宣言されたプロパティビューによってアクセスすることができます：

export class Navmenu { 

    public isLoggedIn: boolean = false; 
    public userName: string = 'anonymous'; 

    constructor(public loggedInService: LoggedInService) { 
     this.isLoggedIn = loggedInService.isAuthenticated(); 
     this.userName = loggedInService.getUserName(); 
    } 
} 

<template> 
    <span>${userName} is logged in: ${isLoggedIn}</span> 
</template> 

あなたがしたい場合はそうは以下のように@bindable()は、あなたが要素を作成するときにその値をバインドすることができることを意味しあなたのルータをあなたのviewmodelに注入すると、あなたの例のようにviewmodelバインディングを使うべきではありません。あなたは単に依存性注入を使ってルータを注入することができます：

import { Router } from "aurelia-routing"; 
import { autoinject } from "aurelia-framework"; 
import { LoggedInService } from "../components/auth/LoggedInService"; 
import { customElement } from "aurelia-templating"; 

@customElement('navmenu') 
@autoinject() 
export class Navmenu { 

     public isLoggedIn: boolean = false; 
     public userName: string = 'anonymous'; 

     constructor(
      public loggedInService: LoggedInService, 
      public router: Router) { 
      this.isLoggedIn = loggedInService.isAuthenticated(); 
      this.userName = loggedInService.getUserName(); 
     } 
    } 

そして、それをあなたのビューモデルおよび/またはビューでアクセスしてください。

Answer 3

はあなたのviewmodelこれは私の問題を修正しました

import { bindable, autoinject } from "aurelia-framework"; 
import { Router } from 'aurelia-router'; 

export class navmenuCustomElement { 
@bindable router: Router; 
}