Question

无论如何，我可以在lanes viewmodel上的BoardComponent属性中获取对子组件的所有视图模型的引用吗？我需要在<boardlane></boardlane>组件的viewmodel中引用al <board></board>。这可能吗？

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列表。

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

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

唯一的问题可能是嵌套 - 我相信原始实现深入选择了后代，但后来被删除了。我不确定它是否重新介绍，但细节在这里：

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元素的viewmodels绑定到parent的viewmodel？

1 个答案: