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

Answer 2

最好将此javascript文件放在@Before目录中，因为vendor中通常包含bower_components。

假设您将此代码放在.gitignore。

中

然后在vendor/file-onload.js

中导入

ember-cli-build.js

如果将这些函数放在相应的app.import('vendor/file-onload.js');控制器中，将会更容易。

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

2 个答案: