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

Question

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

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

<template>
  ${message}
</template>

同行视图模型如何更改显示的消息＆＃39;变量？或许我只是以完全错误的方式解决这个问题......

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 viewmodel（header.js）

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

Child1视图（header.html）

<template>
  ${message}
</template>

Child2 viewmodel（child2.js）

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

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