Aurelia - 绑定和更新自定义元素中的属性

Question

我以为我会很快实现这一点，但它让我陷入了困境。

我有一个自定义元素的侧边栏。它有 2 种“模式”，一种用于“管理”页面，一种用于常规页面。我的 sidebar.js 中有一个存储模式的属性。在 sidebar.html 中，我使用 show.bind="mode!=='admin'" 来显示 UI 的管理部分。当我在构造函数中更改 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 方法中 mode 属性的值（我通过构造函数中的注入引用了侧边栏）：

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 和 Web 开发还是个新手。

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：

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