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

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命令将属性绑定到元素的title bindable属性:

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

或者将该bind命令与object-literal绑定表达式结合使用:

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

注意:支持ES6对象文字简写语法 - 假设您拥有foo,bar并且baz在VM上有道具,这将起作用:

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