双向绑定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>

test-bindable.html

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

test-bindable.ts

import { bindable } from 'aurelia-framework';

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

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

但是，我不确定如何使用 2 个子自定义组件实现相同的功能。我可以使用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>

测试输入.html

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

测试输入.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>