Javascript 在余烬中使用图像标记上的Onload

我有一个模板，其中照片显示在一个框架中（对于不同的图像，每个框架都不同）.我已经编写了一个函数，它使用图像的原始高度和宽度，并为特定帧提供自定义的宽度和高度，以恢复纵横比。现在，我已通过在特定时刻加载图像的onload调用该函数

My feed.hbs（模板）

---

但是它不会包含在ember的构建中，因为我已经将函数文件保存在了bower_Component中。如何将它包含在我的ember应用程序中？

最好将此javascript文件放在

供应商

目录中，因为通常

bower_组件

包含在

.gitignore

中

假设您将此代码放入

供应商/file onload.js

然后在

ember cli build.js中导入

app.import('vendor/file-onload.js');

如果您将这些函数放在相应的
feed
controller中，将更加容易。
我将创建几个余烬组件，而不是创建bower组件：一个在加载图像时触发操作，另一个处理缩放

app/components/x-image/component.js

import Ember from 'ember';

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

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

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

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

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

app/components/scaled image/component.js

import Ember from 'ember';

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

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

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

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

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

app/components/scaled image/template.hbs

import Ember from 'ember';

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

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

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

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

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

在模板中使用

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

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

如果我像你说的那样做。我将在构建ember应用程序时包含文件onload文件。