如何使用promise将app的视图模型绑定到自定义元素？

Question

我想将app.js视图模型中存在的值绑定到自定义元素，但当bind的值为images时，我似乎无法使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。如果我将<?xml version="1.0" encoding="utf-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9&#xD;&#xA;http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"> <url> <loc>http://www.structure.com/Structure.aspx?id=1</loc> </url> </urlset> 设置为硬编码数组，它将按预期工作。我做错了什么？

Answer 1

尝试在activate：

中返回承诺

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

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