Question

我以为我会很快实现这一点，但它让我陷入了一个兔子洞。

我有一个侧边栏，它是一个自定义元素。它有2个'模式'，一个用于'admin'页面，一个用于常规页面。我的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

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

1 个答案: