В 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 ViewModel (header.js)

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

Child1 вид (заголовок. html)

<template> 
    ${message} 
</template> 

Child2 ViewModel (child2.js)

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

Есть другие способы сделать это, но, надеюсь, это получает вас на правильном пути, так что вы можете увидеть, как обязательные работы через взгляды.