javascript - 通过属性将对象传递给自定义组件

Question

如何通过 Aurelia 中的属性将对象传递给自定义组件？

我的自定义组件类如下所示:

import {bindable} from 'aurelia-framework';

export class PageHeading {
    @bindable title = '';
    @bindable subTitle = '';
    @bindable path;

    constructor() {
        console.log('page heading...' + this.subTitle);
    }

    created() {
        console.log('created.. ', this.path);
    }
}

在 html 文件中，我像这样使用该组件:

<page-heading title="Dashboard" sub-title="your starting point" path="${path}"></page-heading>

这适用于 title 和 subTitle 等字符串，但我不确定如何将对象传递给组件。这可能吗？如果是这样，我如何在 Aurelia 中执行此操作？

Answer 1

使用 bind 命令将属性绑定(bind)到元素的标题可绑定(bind)属性:

<page-heading title.bind="myObject" ...></page-heading>

或者将 bind 命令与对象文字绑定(bind)表达式结合使用:

<page-heading title.bind="{ foo: 'foo', bar: someProperty, baz: anotherProperty }" ...></page-heading>

注意:支持 ES6 对象字面量速记语法 - 假设您的 VM 上有 foo、bar 和 baz props，这会起作用:

<page-heading title.bind="{ foo, bar, baz }" ...></page-heading>