Wie binden Sie das Ansichtsmodell der App mithilfe eines Versprechens an ein benutzerdefiniertes Element?

Question

Ich möchte einen Wert in meinem app.js Ansicht-Modell zu einem benutzerdefinierten Element binden, aber ich kann nicht scheinen, bind zu arbeiten richtig zu erhalten, wenn der Wert von images von einem Versprechen gesetzt.

app.js:

@inject(Api) 
export class App { 
    constructor(api) { 
     this.api = api; 
    } 

    . . . 

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

Mein individuelles Element, wie in app.html verwiesen:

<featured-image images.bind="images"></featured-image> 

Mein Ansicht-Modell individuelles Elements, featured-image.js:

import {containerless, bindable} from 'aurelia-framework'; 

@containerless 
export class FeaturedImage { 
    @bindable images = null; 

    attached() { 
     console.log(this.images); 
    } 
} 

this.images ist immer undefined. Wenn ich images auf ein fest codiertes Array setze, funktioniert es wie erwartet. Was mache ich falsch?

Answer 1

Versuchen Sie, das Versprechen in der activate zurückzukehren:

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

Dies stellt sicher, dass Ihre Ansicht wird aktiviert, wenn das Versprechen abgeschlossen ist. Ich denke jedoch, dass es auch ohne return funktionieren sollte, da alle Änderungen im Array auf alle Ansichten übertragen werden, die es binden. Vielleicht verursacht eine andere Sache das Problem.