Пропустить объект к настраиваемому компоненту через атрибут

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, но я «Не знаю, как передать объект компоненту. Это возможно? Если да, то как я могу это сделать в Аурелии?

Answer 1

Используйте команду bind, чтобы связать свойство заголовка привязываемому свойству элемента:

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

или использовать команду bind в сочетании с объектно-буквальным связывания выражения:

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

Примечание: Символ синтаксиса условного символа объекта ES6 поддерживается - если у вас есть foo, bar и baz реквизита на вашей виртуальной машине, это сработало бы:

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