Question

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

app.html：

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

content.html：

<template>
    ${message}
</template>

content.js：

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');
  }
}

在绑定生命周期事件中，我有一个REST服务调用（带有promise），它可以获取一些数据。我在这里遇到的问题是，如果此异步调用需要一些时间，视图app.html将在呈现数据之前呈现，然后在获取数据时它将绑定到该元素。我的意思是，首先浏览器呈现Hello，然后在一段时间后呈现world。我不喜欢我正在处理的特定网站上的这种行为。相反，我更喜欢浏览器是空白的，并在一切准备就绪时渲染所有内容。就像我正在使用服务器端渲染一样。然后，浏览器正在等待服务器在获得完整响应之前构建完整的响应，然后将其全部呈现。

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

ANSWER 该链接确实提供了正确的答案。我可以使用CompositionTransaction让视图等待元素。我相信我有一些缓存文件，在更改代码时，在我删除浏览器中的缓存（chrome）之前它没有用。

Answer 1

答案确实是在上面的案例中使用CompositionTransaction。这个link就是一个例子。我的示例中的解决方案是将视图模型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();
        });
  }
}

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

1 个答案: