Aurelia：ビューで非同期要求を処理する方法は？

Question

私はFileContentResultを返すDOTNETのコアAPIを持っている...

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

郵便配達経由私は完全に罰金画像を読み出すことができます。今、私は、aureliaフェッチクライアントを介して、イメージを読んで、私のhtmlビューでそれを示したいと思います。これは私のAPIから画像を取得する機能です。

public image(filename: string) { 
    return this.http.fetch(AppConfiguration.base_url + 'assets/image', 
     { 
      method: 'post', 
      body: json({ 
       filename: filename 
      }) 
     }); 
} 

私はこの値コンバータを使用して応答内のブロブを変換しようとしました。しかし、私はそれが

コンバータを動作させることはできません。

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

のViewModelを：

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

ビュー

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

私は、これは正しいアプローチではよく分かりません。また、非同期要求部分をどのように処理するかもわかりません。その画像レスポンスをHTMLビューで表示するにはどうすればよいでしょうか？ imgタグで言うことができますか？

Answer 1

私は近くにいました。ここにイメージを表示する方法を示します。

のViewModel：

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

ビュー：

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

EDIT：コールを行い

エクスポート機能：

の上に書かれたパーツを使用して、より良い解決策を見つけました（両方のTSでの再利用性およびHTML側）：関数

import { image_request } from './AssetsRequests'; 

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

上記溶液の重要かつ最も素晴らしい部分を使用

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

値変換。多くのお返事をhttp://www.sobell.net/aurelia-async-bindings/ 私の方法で私を得るために。バインディング動作をオーバーライドすることができます。このオーバーライドを使用して、非同期の処理を行うことができます。 値コンバータと組み合わせたビューでのプロミス

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

は最後のビューは非常に簡単です

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