javascript - Aurelia - 绑定(bind)和更新自定义元素中的属性

Question

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

我有一个侧边栏，它是一个自定义元素。它有 2 种“模式”，一种用于“管理”页面，一种用于常规页面。我的 sidebar.js 中有一个属性用于存储模式。在 sidebar.html 中，我使用 show.bind="mode!=='admin'" 显示 UI 的管理部分。当我更改构造函数中模式属性的值时，它会按预期工作。

我似乎无法用代码更改 View 。

侧边栏是我的 app.html 的一部分:

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

现在我有另一个 View 想要更改侧边栏的模式。在该 View 的 js 中，我更改了 activate 方法中的 mode 属性值(我通过构造函数中的注入(inject)引用了侧边栏):

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
        ...
    }
}

模式的值已更改，但我的侧边栏 View (html)未更新。

总的来说，我对 Aurelia 和 Web 开发还是新手。

执行此操作的最佳Aurelia 方式是什么？

Answer 1

自定义元素是暂时的，这意味着每当您注入(inject)它们时，您都会获得一个新实例。要通过 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);
  }

}

然后，您可以将其注入(inject)到您的 View 中:

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