Aurelia - カスタム要素のプロパティをバインドして更新する

Question

私はこれをすぐに実装すると思っていましたが、ウサギの穴を私に送ってきました。

私はカスタム要素であるサイドバーを持っています。それには2つの 'モード'があり、1つは '管理者'ページ用で、もう1つは通常のページ用です。サイドバーにはモードを格納するプロパティがあります。 sidebar.htmlでは、UIの管理部分を表示するのにshow.bind="mode!=='admin'"を使用します。コンストラクタでmodeプロパティの値を変更すると、期待どおりに動作します。

コードで表示を変更できないようです。

サイドバーには、私のapp.htmlの一部です：

<template> 
<require from="./elements/sidebar"></require> 
<div id="wrapper"> 
    <sidebar mode="regular"></sidebar> 
    <main> 
     <router-view></router-view> 
    </main> 
</div> 

今私は、サイドバーのモードを変更したい別のビューを持っています。そのビューのJSで、私はactivate方法（私は、コンストラクタ内注射を介してサイドバーを参照すること）のモードプロパティの値を変更：

activate(params, routeConfig){ 
    this.sidebar.mode = "admin"; 
    ... 
} 

しかし、何も更新されますように思われます。これは私のsidebar.jsです：

import {bindable} from "aurelia-framework"; 
import config from 'config'; 

export class Sidebar { 

    @bindable mode; 

    constructor(){ 
     ... 
     this.mode = "regular"; //default value is regular 
     ... 
    } 
} 

モードの値が変更されたが、私のサイドバーの表示（HTML）は更新されません。

私はまだAureliaとウェブ開発ではまだ一般的です。

最高のものはアウレリアの方法これは何ですか？

Answer 1

カスタム要素は一時的です。つまり、挿入するたびに新しいインスタンスが作成されます。 SidebarインスタンスをDIで取得するには、最初に登録する必要があります。たとえば、次のように

HTML：

<template> 
    <require from="./sidebar"></require> 

    <sidebar view-model.ref="sidebar"></sidebar> 
    <br><br> 
    <router-view></router-view> 
</template> 

JS：

import { Sidebar } from './sidebar'; 
import { Container, inject } from 'aurelia-framework'; 

@inject(Container) 
export class App { 
    constructor(container) { 
    this.container = container; 
    } 

    bind() { 
    this.container.registerInstance(Sidebar, this.sidebar); 
    } 

} 

はその後、あなたはあなたのビューにそれを注入することができます：

例実行

import { Sidebar } from './sidebar'; 
import { inject } from 'aurelia-framework'; 

@inject(Sidebar) 
export class Route1 { 

    constructor(sidebar) { 
    this.sidebar = sidebar; 
    this.sidebar.admin = false; 
    } 

} 

：https://gist.run/?id=0bf1e32cdccc37ceebc57c2d74ba2ca0

を