如何使用承诺将应用程序的视图模型绑定到自定义元素？

Question

我想将 app.js 视图模型中的值绑定到自定义元素，但是当 images 由 Promise.

设置

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

尝试returnactivate中的承诺：

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

这确保您的视图将在承诺完成时激活。但是，我认为即使没有 return 它也应该工作，因为数组中的任何更改都会传播到绑定它的所有视图。可能是另一件事导致了这个问题。

如何使用承诺将应用程序的视图模型绑定到自定义元素？

How to bind app's view-model to custom element using a promise?

aurelia