Двустороннее связывание 2 дочерних компонентов

Question

Следующая модель работает нормально, у меня есть компонент prent (app.html + .ts), дочерний компонент (test-binding.html +.ts) и поле ввода с двусторонней привязкой

родительский компонент

<template bindable="query">
    <require from="./test-bindable"></require>

    <input type="text" value.bind="query"/>
    <test-bindable query.bind="query"></test-bindable>

</template>

Тест-bindable.html

<template>
    <div>${query}</div>
</template>

тест-bindable.ts

import { bindable } from 'aurelia-framework';

export class TestBindable{
@bindable query = 'potato';

valueChange(newValue, oldValue)
{
    //Do something
}
created(){
    console.log('test component created');
}
}

Однако я не уверен, как реализовать ту же функциональность с двумя дочерними пользовательскими компонентами. Я легко могу добиться того же, используя eventAggregator, и прослушиваю в своих дочерних компонентах событие, которое должно быть запущено, однако я пытаюсь добиться той же функциональности, используя двустороннее связывание. Например:

родительский компонент (app.html)

<template bindable="query">
    <require from="./test-bindable"></require>
    <require from="./test-input"></require>

    <test-input value.bind="query"></test-bindable>
    <test-bindable query.bind="query"></test-bindable>
</template>

Тест-input.html

<template>
    input type="text" value.bind="test"/>
</template>

тест-input.ts

import { bindable } from 'aurelia-framework';

    export class TestInput{
    @bindable query;

    valueChange(newValue, oldValue)
    {
        //Do something
    }
    created(){
        console.log('test component created');
    }
}

Answer 1

Здесь следует отметить, что режим привязки по умолчанию для bindable (с помощью bind) на самом деле one-way, если вы хотите, чтобы оба компонента "общались", просто укажите two-way в обязательном порядке. достаточно связать test-input с two-way потому что он единственный, кто на самом деле меняет вход.

<template bindable="query">
    <require from="./test-bindable"></require>
    <require from="./test-input"></require>

    <test-input value.two-way="query"></test-bindable>
    <test-bindable query.bind="query"></test-bindable>
</template>