Question

我对Aurelia很新，但到目前为止我很享受。我想确保我能做到这一点＆＃34; Aurelia＆＃34;方式 - 而且我没有错过任何东西，因为我的新平台 - 蜘蛛侠感觉告诉我，我做错了什么。

现在我只是尝试更改图像的类onLoad以进行＆＃34;动画，漂亮加载等等＃34; ...（客户端）

到目前为止我的方法：

模板

<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.trigger（与event.delegate相同）是必要的，并且使用已绑定的拇指数据可能是我最好的选择。

思想...？

Answer 1

你看起来对我很好。以下是您可以尝试的一些调整，可以简化代码：

<强> https://gist.run?id=251638547841a34746d9cbd874da14e2

<强> app.html

marker-opacity

<强> app.js

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

Aurelia - 事件加载/＆＃34;延迟加载＆＃34;图像

1 个答案: