属性を使用してオブジェクトをカスタムコンポーネントに渡す

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のコマンドを使用します。

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

またはオブジェクトリテラルバインディング式と併せてbindのコマンドを使用します。

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

注：あなたのVMにfoo、bar、bazの小道具があると仮定すると、ES6オブジェクトリテラルの略式構文がサポートされます。

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