In Aurelia, wie kann man ein View-Modell beeinflussen die gebundenen Variablen eines anderen Modell-View

Question

Ich möchte der Körper meiner Anwendung in der Lage sein, eine Nachricht in der Kopfzeile angezeigt ändern.

Zum Beispiel, wenn header.html sieht wie folgt aus:

<template> 
    ${message} 
</template> 

Wie konnte ein Peer-View-Modell ändern, die 'Nachricht' Variable angezeigt? Oder vielleicht gehe ich gerade das völlig falsch herum ...

Answer 1

Die häufigste Lösung für Ihr Szenario ist die Verwendung des übergeordneten Viewmodel, um die beiden Peers zu überbrücken. Binden Sie die gleiche Variable (entweder als einzelne Variable oder als Objekt) an beide unter Verwendung der Zweiwege-Bindung. Wenn es sich dann in einem ändert, wird es sich im anderen ändern.

Beispiel:

Eltern Ansicht (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 Ansicht (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!"; 
    } 
} 

Es gibt auch andere Möglichkeiten, dies zu tun, aber hoffentlich bekommt man auf dem richtigen Weg, so dass Sie, wie Sie die Bindung Werke über Ansichten sehen.