Aurelia - イベント読み込み/ "遅延ロード"画像

Question

私はAureliaにはとても新しいですが、これまで楽しんでいます。私はこれを「Aurelia」のやり方で行いたいと思っています。新しいplatform-spidey-senses™が私に何か間違っていると言っているので、何かが欠けているわけではありません。

私は単純にするために、画像 onLoadのクラスを変更しようとしている今の

「アニメーション、かなりの負荷、および、そのような」...（クライアント）これまで

私のアプローチ：

テンプレート

<template> 
    <div class="random" repeat.for="thumb of thumbs"> 
    <img 
     alt="thumb.name" 
     src.bind-one-time="${server}/${thumb.uri}" 
     load.trigger="loaded(thumb)" 
     class.bind="thumb.loaded" 
     class="lazyload" 
    /> 
    </div> 
</template> 

ビューモデル

import { HttpClient } from 'aurelia-fetch-client' 
import environment from './environment' 

export class App { 

    constructor() { 
    this.client = new HttpClient() 
    this.thumbs = [] 
    this.loaded = t => { t.loaded = 'loaded' } 
    } 

    activate() { 
    return this.client.fetch(`${environment.api}/api`) 
     .then(response => response.json()) 
     .then(data => { 
     this.data = data 
     this.thumbs = data.map(item => { 
      if (item.thumbnails) 
      return item.thumnails 
     )} 
    )} 
    } 
    } 

これは要約されたコードです。物事を読みやすいようにしようとしています。 最も近いのはevent.delegateのようにevent.triggerと書かれています。この場合、既にバインドされている親指データを使用するのがおそらく最も良い方法です。

思考...？

Answer 1

あなたが持っているものは私にはかなり良いです。

https://gist.run?id=251638547841a34746d9cbd874da14e2

app.html

<template> 
    <div repeat.for="thumb of thumbs"> 
    <img 
     alt.one-time="thumb.name" 
     src.one-time="server + '/' + thumb.uri" 
     load.trigger="$event.target.classList.add('loaded') & oneTime" 
     class="thumbnail" 
    /> 
    </div> 
</template> 

app.js

export class App { 
    server = 'https://i.imgur.com'; 
    thumbs = [ 
    { name: 'SpaceX', uri: 'xSraADG.jpg' }, 
    { name: 'SpaceX', uri: 'HSeX7Nn.jpg' }, 
    ]; 
}