Aurelia - Render anzeigen, bevor benutzerdefiniertes Element bereit/gebunden ist

Question

Ich habe eine sehr einfache App mit einer Ansicht und einem benutzerdefinierten Element.

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

Im Inneren des bind Lebenszyklus Ereignis ich einen REST-Service-Anruf (mit einem Versprechen), die mir einige Daten holt. Das Problem, das ich hier habe, ist, dass, wenn dieser asynchrone Aufruf einige Zeit braucht, die Ansicht app.html vor und dann beim Holen der Daten rendern wird, wird sie an das Element gebunden. Was ich meine ist, dass zuerst der Browser Hello rendert und dann nach einiger Zeit world rendert. Ich mag dieses Verhalten auf der spezifischen Website, an der ich gerade arbeite, nicht. Stattdessen würde ich bevorzugen, dass der Browser leer ist und alles rendert, wenn alles fertig ist. Sehr ähnlich, wenn ich mit serverseitigem Rendering arbeite. Dann wartet der Browser darauf, dass der Server die vollständige Antwort erstellt, bevor er sie erhält, und dann alles wiedergibt.

Das Ereignis activate() funktioniert in einem Ansichtsmodell, aber jetzt habe ich ein benutzerdefiniertes Element. Ist es möglich, etwas Ähnliches zu tun? Ich muss die Daten im benutzerdefinierten Element nicht im Ansichtsmodell abrufen. Ansonsten weiß ich, dass ich es im View-Modell holen und später über eine Eigenschaft an das Element binden kann. Dies ist für mich nicht möglich. Auch ich schaute auf diese link, aber konnte es nicht zum Laufen bringen. Nicht sicher, ob es derselbe Fall ist wie ich.

ANTWORT Der Link in der Tat liefern die richtige Antwort. Ich kann die CompositionTransaction verwenden, um die Ansicht auf das Element warten zu lassen. Ich glaube, ich hatte einige zwischengespeicherte Dateien und beim Ändern des Codes hat es nicht funktioniert, bevor ich den Cache in meinem Browser gelöscht habe (Chrome).

Answer 1

Die Antwort ist in der Tat CompositionTransaction im obigen Fall zu verwenden. Diese link zeigt ein Beispiel dafür. Die Lösung in meinem Beispiel ist die Ansicht Modell content.js zu so etwas zu ändern:

in diesem Beispiel

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