在 Aurelia 中，一个视图模型如何影响另一个模型视图的绑定变量

Question

我希望我的应用程序主体能够更改标题中显示的消息。

例如，如果 header.html 看起来像这样：

<template>
  ${message}
</template>

显示“消息”变量的对等视图模型如何更改？或者也许我只是以完全错误的方式去做这件事......

Answer 1

您的场景最常见的解决方案是使用父视图模型来桥接两个对等点。使用双向绑定将相同的变量（作为单个变量或作为对象）绑定到两个子项。然后，当它在一个中发生变化时，它会在另一个中发生变化。

示例：

父视图 (parent.html)

<template>
  <require from="./header"></require>
  <require from="./my-child2"></require>

  <header message.two-way="message"></header>
  <my-child2 message.two-way="message"></my-child2>
</template>

Child1 视图模型 (header.js)

import {bindable} from 'aurelia-framework';
export class Header {
  @bindable message;
}

Child1 视图 (header.html)

<template>
  ${message}
</template>

Child2 视图模型 (child2.js)

import {bindable} from 'aurelia-framework';
export class MyChild2 {
  @bindable message;
  attached() {
    this.message = "Greetings from MyChild2!";
  }
}

还有其他方法可以做到这一点，但希望这能让你走上正轨，这样你就可以看到绑定是如何跨视图工作的。