在ember中的图像标记上使用Onload

Question

我有一个模板,其中照片显示在一个框架中(每个框架对于不同的图像是不同的).我已经编写了一个功能,使用图像原始的高度和宽度,并给我自定义的宽度和高度为该特定框架,以便恢复宽高比.现在我通过onload调用该函数,因为图像在特定时刻加载.

我的feed.hbs(模板)

<img src = "{{photo.0.photo_url}}" onload = "OnImageLoad(event);" {{action "imgOverlay0" photo}}/>

功能

function OnImageLoad(evt) {

    var img = evt.currentTarget;

    // what's the size of this image and it's parent
    var w = $(img).width();
    var h = $(img).height();
    var tw = $(img).parent().width();
    var th = $(img).parent().height();

    // compute the new size and offsets
    var result = scaling(w, h, tw, th,false);

    // adjust the image coordinates and size
    img.width = result.width;
    img.height = result.height;
    $(img).css("margin-left", result.targetleft);
    $(img).css("margin-top", result.targettop);
    // console.log("result",result)
    return result;
}

function scaling (w, h, tw, th,false){
   //manipulation with data 
}

}

但它不会包含在ember的构建中,因为我将函数文件保存在bower_compontent中.如何将它包含在我的ember应用程序中？

Answer 1

我没有创建一个bower组件,而是创建了一些ember组件:一个在加载图像时触发动作,另一个用于处理缩放.

应用/组件/ X-图像/ component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'img',

  didInsertElement() {
    this._super(...arguments);

    this.$()[0].onload = () => {
      this.sendAction('imageLoaded');
    };
  },
});

应用/组件/按比例放大的图像/ component.js

import Ember from 'ember';

export default Ember.Component.extend({
  setImageDimensions() {
    const img = this.$('img');

    // what's the size of this image and it's parent
    const w = img.width();
    const h = img.height();
    const tw = img.parent().width();
    const th = img.parent().height();

    // compute the new size and offsets
    const result = this.scaling(w, h, tw, th, false);

    // adjust the image coordinates and size
    img.width = result.width;
    img.height = result.height;
    img.css("margin-left", result.targetleft);
    img.css("margin-top", result.targettop);
    // console.log("result",result)
  },

  scaling(w, h, tw, th,false) {
    //manipulation with data 
  },

  actions: {
    imageLoaded() {
      this.setImageDimensions();
    }
  }
});

应用/组件/按比例放大的图像/ template.hbs

{{x-image
  src=src
  imageLoaded=(action 'imageLoaded')
}}

在模板中使用

{{scaled-image
  src=photo.0.photo_url
  action=(action "imgOverlay0" photo)
}}