ecmascript-6 - 在 Aurelia 中将数据从一个 View 模型传递到另一个 View 模型

Question

我有一个名为 entry-main 的页面它包括这个模板:

<template>
    <entry-search></entry-search>
    <entry-details></entry-details>
</template>

内部 <entry-search>还有另一个自定义元素。它看起来像这样:

<template>
    <div class="row">
        <div class="col-lg-12">
            <div class="input-group">
                <span id="entry_search" class="input-group-addon">
                    <span class="fa fa-search"></span>
                </span>
                <!-- important part -->
                    <typeahead id="choose" placeholder="Holding the place"></typeahead>
                <!-- end of important part -->
            </div>
        </div>
    </div>
</template>

在 typeahead View 模型中，我得到了 typeahead 的值，如下所示:

$(this.id).on('typeahead:selected', function (e, item) {
       this.selected = item;
});

我现在的问题是，我怎样才能得到 this.selected从我的条目详细信息 View 模型中的预输入 View 模型？

为了清楚起见，它应该是这样的:

<entry-main>
    <entry-search>
          <typeahead></typeahead>
    </entry-search>

    <entry-details>
          ${selected}
    </entry-details>
</entry-main>

Answer 1

你可以这样做:

在 entry-main 中创建属性“已选择” :

export class EntryMain {
    selected = '';
    //rest of the code
}

在 typeahead 中创建可绑定(bind)属性:

import { bindable } from 'aurelia-framework';

export class Typeahead {
    @bindable selected;
    //... rest of the code
}

将 typeahead 的“selected”绑定(bind)到 entry-main 的“selected”

<entry-main>
    <entry-search>
        <typeahead selected.bind="selected"></typeahead>
    </entry-search>

    <entry-details>
        ${selected}
    </entry-details>
</entry-main>

未经测试的代码，但我认为它应该可以工作。