Question

前几天我问了这个问题2 way databinding in Aurelia custom elements - bind custom element to parent viewmodel

现在我需要能够在我的父元素（create.js）中重用自定义元素（my-custom.js）中的allSelectableValues。

我需要这个我在create.js上的自定义值转换器，它包含一些我需要显示名称的ID，通过循环遍历当前获取并驻留在我的自定义元素中的元素数组。

**create.html**
<td>${d.SomeID | allSelectableValuesMapping}</td>

和

**value-converters/all-selectable-values-mapping.js**
export class AllSelectableValuesMappingValueConverter {
    toView(value) {
        for(let item in allSelectableValues) {
            if (item.SomeID == value){
                return item.Name;
            }
        }

    }
}

在理想的世界中，我希望这样的事情会起作用：

**my-custom.js**
async attached() {
    this.allSelectableValues= await await this.myService.getAllValues();
    this.parent.allSelectableValues = this.allSelectableValues;
}

但是我的自定义元素不知道需要它的父级。

有没有人知道如何在自定义元素中设置父级的allSelectableValues等于自定义元素的allSelectableValues？或者是否有另一种更好的方法来实现它，同时仍然保持双向数据绑定自定义元素？

Answer 1

这样的东西？

请特别注意@customElement('CustomElement')代码行上方的export class CustomElement声明符。

自定义元素视图模型

import {inject} from 'aurelia-framework';
import {customElement} from 'aurelia-framework';
import {bindable} from 'aurelia-framework';

@customElement('CustomElement')
export class CustomElement {
    @bindable arrItems
}

自定义元素HTML

<template>
    <div repeat.for="item of arrItems">$(item.someProperty}</div>
</template>

父视图模型

export class ParentViewModel {
    parentArrItems = [];
}

父HTML

<template>
    <require from="customelement"></require>

    <CustomElement arrItems.bind="parentArrItems"></CustomElement>
</template>

如何在Aurelia的自定义元素中设置父属性？

1 个答案:

自定义元素视图模型

自定义元素HTML

父视图模型

父HTML