Aurelia-在自定义元素就绪/绑定之前查看渲染

我有一个非常简单的应用程序，有一个视图和一个自定义元素

app.html：

<template>
  <require from="./content"></require>
  hello
  <content></content>
</template>

在bind生命周期事件中，我有一个REST服务调用（带有承诺），它为我获取一些数据。我在这里遇到的问题是，如果这个异步调用需要一些时间，view app.html将在之前呈现，然后在获取数据时，它将绑定到元素。我的意思是，浏览器首先呈现

Hello

，然后在一段时间后呈现

world

。我不喜欢我正在工作的特定站点上的这种行为。相反，我更希望浏览器是空白的，并在一切就绪时呈现所有内容。 就像我在使用服务器端渲染一样。然后，浏览器等待服务器建立完整的响应，然后再获取并呈现所有响应

事件

activate（）

在视图模型中工作，但现在我有了一个自定义元素。有可能做类似的事情吗？ 我需要获取自定义元素中的数据，而不是视图模型中的数据。否则，我知道我可以在视图模型中获取它，然后通过属性将其绑定到元素。这对我来说是不可能的。 我也看了这个，但没能让它工作。我不知道是否和我的情况一样

回答

---

这个链接实际上提供了正确的答案。我可以使用

CompositionTransaction

让视图等待元素。我相信我有一些缓存文件，当更改代码时，在我删除浏览器（chrome）中的缓存之前，它不起作用。

答案确实是在上述情况下使用

CompositionTransaction

。 这是一个例子。 我的示例中的解决方案是将view model content.js更改为如下内容：

import {HttpClient} from 'aurelia-http-client';
import {inject, CompositionTransaction } from 'aurelia-framework';

@inject(HttpClient, CompositionTransaction)
export class Content {

  constructor(http, compositionTransaction) {
    this.http = http;
    this.compositionTransactionNotifier = compositionTransaction.enlist();
  }

  bind() {
      return this.http.get('https://api.github.com/users/aurelia/repos')
      .then(c => {
          this.message = 'world';
          this.compositionTransactionNotifier.done();
        });
  }
}

---

看起来该示例中的键是使用

this.compositionTransactionNotifier=this.compositionTransaction.enlist（）

和

this.compositionTransactionNotifier.done（）。虽然这对你没用？没有。但我只是做了一个快速测试。我可能出了什么问题。我会再试一次，看看这是否是一个可行的解决方案。当然，它是有效的。在我更改代码后，似乎有一些缓存文件给我带来了一些问题。也许值得用你的最终工作代码@John来回答这个问题-我认为这是一个非常常见的问题，
import {HttpClient} from 'aurelia-http-client';
import {inject} from 'aurelia-framework';

@inject(HttpClient)
export class Content {

  constructor(http) {
    this.http = http;
  }

  bind() {
      return this.http.get('https://api.github.com/users/aurelia/repos')
      .then(c => this.message = 'world');
  }
}

import {HttpClient} from 'aurelia-http-client';
import {inject, CompositionTransaction } from 'aurelia-framework';

@inject(HttpClient, CompositionTransaction)
export class Content {

  constructor(http, compositionTransaction) {
    this.http = http;
    this.compositionTransactionNotifier = compositionTransaction.enlist();
  }

  bind() {
      return this.http.get('https://api.github.com/users/aurelia/repos')
      .then(c => {
          this.message = 'world';
          this.compositionTransactionNotifier.done();
        });
  }
}