Aurelia：如何将子 DOM 元素的视图模型绑定到父视图模型？

Question

我是否可以在 BoardComponent 视图模型上获得对 lanes 属性中子组件的所有视图模型的引用？我需要在 <board></board> 组件的视图模型中引用 al <boardlane></boardlane> 。这可能吗？

App.ts

export class App {
    public groups: any[] = [
        {
            title: 'first group'
        },
        {
            title: 'second group'
        }
    ]
}
<template>
    <board>
        <boardlane repeat.for="group of groups" title.bind="group.title"></boardlane>
    </board>
</template>

板组件

@customElement('board')
export class BoardComponent {
    public lanes: BoardLaneComponent[];
}

<template>
    <div class="board">
        <slot></slot>
    </div>
</template>

BoardLane 组件

@customElement('boardlane')
export class BoardLaneComponent { }

<template>
    <div class="boardlane">
        I am a board lane
    </div>
</template>

Answer 1

您可以试试 @children 装饰器：

板组件

import {children} from 'aurelia-framework';

@customElement('board')
@children({ name: 'lanes', selector: 'boardlane' })
export class BoardComponent {
    public lanes: BoardLaneComponent[];

    lanesChanged() {
        // Handle any mutations to the array here
    }
}

<template>
    <div class="board">
        <slot></slot>
    </div>
</template>

理论上，这应该通过使用选择器在视图中收集元素来维护 BoardComponent 上的子 VM 列表。

如果元素是 non-aurelia 支持的元素，它们将由指定数组中的 Element 个实例表示，否则它们将是对支持该元素的实际 Aurelia VM 的引用。

此外，它会默认创建一个名为 <x>Changed 的函数，其中 <x> 是后备数组的名称。您可以使用它来通知被跟踪元素发生的任何变化。

唯一的问题可能是嵌套 - 我相信最初的实现 deep-selected 到后代中，但后来被删除了。我不确定是不是 re-introduced，但详细信息在这里：

https://github.com/aurelia/templating/issues/451

假设您不需要去看孙子，这应该可行。

免责声明： 有一段时间没有做任何 Aurelia 开发 :(

注意： 我认为文档没有清楚地列出 children 的 API 和它采用的 selectorOrConfig 参数

在源代码中它看起来像这样：

constructor(config) {
    this.name = config.name;
    this.changeHandler = config.changeHandler || this.name + 'Changed';
    this.selector = config.selector;
    this.all = config.all;
}

因此看起来该对象可以具有这些属性 - 虽然不确定 all 的作用，但有趣的是您可以更改数组内容发生变化时触发的更改处理程序的名称。

Aurelia：如何将子 DOM 元素的视图模型绑定到父视图模型？

Aurelia: How to bind viewmodels of child DOM elements to parent's viewmodel?

aurelia