Aurelia - 맞춤 요소의 속성 바인딩 및 업데이트

Question

나는 이것을 신속하게 구현할 것이라고 생각했지만 토끼 구멍 아래로 나를 보내 왔습니다.

나는 사용자 정의 요소 인 사이드 바를 가지고 있습니다. 그것에는 2 개의 '모드'가 있는데, 하나는 '관리'페이지 용이고 다른 하나는 일반 페이지 용입니다. 내 사이드 ​​바에는 모드를 저장하는 속성이 있습니다. sidebar.html에서 show.bind="mode!=='admin'"을 사용하여 UI의 관리 부분을 표시합니다. 생성자에서 mode 속성의 값을 변경하면 예상대로 작동합니다.

코드로보기를 변경할 수 없습니다.

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

가 지금은 사이드 바의 모드를 변경하고자 다른보기 있습니다

사이드 바 내 app.html의 일부입니다.

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

을하지만 아무것도 업데이 트 것 같다 : 해당 뷰의 JS에서 나는 activate 방법 모드 속성 값을 변경 (I 생성자 주입을 통해 사이드에 대한 참조를 만들). 이것은 내 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와 웹 개발에 대해 전반적으로 새로운 기술입니다.

가장 좋은 것은 Aurelia 방법입니다.

Answer 1

사용자 지정 요소는 일시적이므로 삽입 할 때마다 새 인스턴스를 가져옵니다. DI로 Sidebar 인스턴스를 얻으려면 먼저 등록해야합니다.

HTML :

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

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

JS : 예를 들어 https://gist.run/?id=0bf1e32cdccc37ceebc57c2d74ba2ca0

:

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

@inject(Sidebar) 
export class Route1 { 

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

} 

하는 예를 실행 : 다음

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

} 

, 당신은 당신의보기에 주입 할 수있다