約束を使ってアプリケーションのビューモデルをカスタム要素にバインドするにはどうすればいいですか？

Question

私は、カスタム要素への私のapp.jsビューモデルに存在する値をバインドしたいと思いますが、私はimagesの値は約束から設定されている場合bindが正しく動作するように見えることはできません。

app.js：

@inject(Api) 
export class App { 
    constructor(api) { 
     this.api = api; 
    } 

    . . . 

    activate() { 
     this.api.mockGet('gallery').then((images) => this.images = images); 
    } 
} 

私のカスタム要素、app.htmlに参照されるように：

<featured-image images.bind="images"></featured-image> 

私のカスタム要素のビューモデル、featured-image.js：

import {containerless, bindable} from 'aurelia-framework'; 

@containerless 
export class FeaturedImage { 
    @bindable images = null; 

    attached() { 
     console.log(this.images); 
    } 
} 

this.imagesは常にundefinedです。 imagesをハードコードされた配列に設定すると、期待どおりに動作します。私は間違って何をしていますか？

Answer 1

はactivateに約束を返すようにしてください：

activate() { 
    return this.api.mockGet('gallery') 
     .then((images) => this.images = images); 
} 

これは約束が完了したとき、あなたのビューがアクティブになることを保証します。しかし、配列内の変更はそれをバインドするすべてのビューに伝播するため、returnがなくても動作するはずです。おそらく別の問題がこの問題の原因です。