Aurelia: Wie behandelt man eine asynchrone Anfrage in einer Ansicht?

Question

Ich habe einen Dotnet Kern api, die ein Filecontentresult zurück ..

return new FileContentResult(bytes, contentType) 
{ 
    FileDownloadName = Path.GetFileName(request.Filename) 
}; 

Via Postbote ich das Bild völlig in Ordnung auslesen kann. Jetzt möchte ich das Bild über den Aurelia Fetch Client lesen und in meiner HTML Ansicht anzeigen. Dies ist meine Funktion, um das Bild von der API abzurufen.

Ich habe versucht, den Blob in der Antwort mit diesem Wertkonverter zu konvertieren. Aber ich kann nicht, dass

Converter zu arbeiten:

export class BlobToUrlValueConverter { 
    public toView(blob) { 
     return URL.createObjectURL(blob); 
    } 
} 

Ansichtsmodell:

export class Dashboard { 

    public blob: any; 

    constructor(
     public assets_service: AssetsService 
    ) { } 

    async attached() { 
     let response = await this.assets_service.image('test.png'); 
     this.blob = response.blob(); 
    } 
} 

Ansicht

<div if.bind="blob"> 
    ${ blob | blobToUrl } 
</div> 

Ich bin mir nicht sicher, dass dies der richtige Ansatz ist. Auch nicht sicher, wie die async Anfrage Teil davon entweder behandeln. Was ist der beste Weg, um diese Bildantwort in der HTML-Ansicht anzuzeigen? Sagen wir über ein img-Tag?

Answer 1

Ich war in der Nähe. Hier ist, wie ich das Bild zeigen konnte.

Ansichtsmodell:

export class Dashboard { 

    public url: string; 

    constructor(
     public assets_service: AssetsService 
    ) { } 

    async attached() { 
     let blob = await this.assets_service.image('test.png') 
      .then(response => response.blob()); 
     this.url = URL.createObjectURL(blob); 
    } 
} 

Ausblick:

<div if.bind="url"> 
    <img src.bind="url"> 
</div> 

EDIT:

gefunden, eine bessere Lösung Teile geschrieben oben mit:

die exportierte Funktion, die den Anruf tut (zur Wiederverwendung auf beiden Seiten und HTML-Seiten):

export function image_request(filename: string): Promise<Response> { 
    let http = new Http(); 
    return http.fetch(<your-url-that-fetches-the-image>, 
     { 
      method: 'post', 
      body: json({ 
       filename: filename 
      }) 
     }); 
} 

Wertwandler, der über Funktion verwendet

import { image_request } from './AssetsRequests'; 

export class ImageRequestValueConverter { 
    public toView(filename: string) { 
     return image_request(filename); 
    } 
} 

den wichtigen und fantastischste Teil der Lösung. Vielen Dank an http://www.sobell.net/aurelia-async-bindings/ für mich auf meinen Weg. Sie können das Bindungsverhalten überschreiben. Sie können diese Überschreibung verwenden, um asynchrone Versprechen in einer Ansicht in Kombination mit einem Wertkonverter zu verarbeiten.

export class AsyncImageBindingBehavior { 

    public bind(binding, source): void { 
     binding.originalupdateTarget = binding.updateTarget; 
     binding.updateTarget = (target) => { 
      // When we have a promise 
      if (typeof target.then === 'function') { 
      // Set temp value to loading so we know its loading 
      binding.originalupdateTarget('Loading...'); 
      // Process the promise 
      target 
       .then(response => response.blob()) 
       .then(blob => binding.originalupdateTarget(
        URL.createObjectURL(blob) 
       )); 
      } 
      else { 
       binding.originalupdateTarget(target); 
      } 
     }; 
    } 

    unbind(binding) { 
     binding.updateTarget = binding.originalupdateTarget; 
     binding.originalupdateTarget = null; 
    } 
} 

schließlich die Aussicht ist sehr einfach

<img src="${ 'test.png' | imageRequest & asyncImage }">