Ember.js 余烬：处理组件内的窗口大小调整

我有一个组件，它可以呈现一组选定的图像，我有一些CSS用于“悬停遮罩”，它可以覆盖图像，当用户悬停在图像上时，显示有关该图像的一些信息

悬停遮罩的尺寸需要与应用程序首次加载时以及窗口调整大小时的图像尺寸相匹配

这是基本的加价

<div class="call-out-item">
  <img src="......">
  <div class="hover-mask">Some info about this image</div>
</div>

这是我的组件代码（不确定是否正确使用了Ember.run.next（！）

---

我在Chrome和Firefox中使用此代码会得到不同的结果，所以这里一定是做错了什么！

这是我的解决方案。其中一个问题（在Firefox中）是上面的代码最初没有计算图像的宽度，所以我现在正在计算宽度（和高度）并将图像的宽度和高度设置为100%

我仍然认为在调整窗口大小时会出现一些小问题（有人知道为什么吗？），但我希望这能有所帮助

// component code 

import Ember from 'ember';
const {$} = Ember;

export default Ember.Component.extend({
  tagName:'div',
  classNames:[],
  init() {
    this._super(...arguments);
    this.handleResize = function() {
      let itemWidth = parseInt($(".call-out-item").width());
      let itemHeight = parseInt(itemWidth/1.5);
      $(".hover-mask").css({"width":itemWidth,"height":itemHeight});
   };
   Ember.run.next(this, this.handleResize);
   $(window).on('resize', Ember.run.bind(this, this.handleResize));
 },
 // rest of code 

---

这是我的解决方案。问题之一（在Firefox中）是上面的代码最初没有计算图像的宽度，所以我现在计算父容器的宽度（和高度），并将图像的尺寸设置为100%的宽度和高度

我仍然认为在调整窗口大小时会出现一些小问题（有人知道为什么吗？），但我希望这能有所帮助

// component code 

import Ember from 'ember';
const {$} = Ember;

export default Ember.Component.extend({
  tagName:'div',
  classNames:[],
  init() {
    this._super(...arguments);
    this.handleResize = function() {
      let itemWidth = parseInt($(".call-out-item").width());
      let itemHeight = parseInt(itemWidth/1.5);
      $(".hover-mask").css({"width":itemWidth,"height":itemHeight});
   };
   Ember.run.next(this, this.handleResize);
   $(window).on('resize', Ember.run.bind(this, this.handleResize));
 },
 // rest of code 

---

确保在组件销毁时解除事件绑定，否则当用户在其他路由上时，事件将继续触发

initResizeObserver: on("init", function () {
  $(window).on('resize', this.handleResize.bind(this));
}),

willDestroyElement () {
  this._super(...arguments);
  $(window).off("resize");
},

handleResize (e) {
  console.log(e)
},

---

确保在组件销毁时解除事件绑定，否则当用户在其他路由上时，事件将继续触发

initResizeObserver: on("init", function () {
  $(window).on('resize', this.handleResize.bind(this));
}),

willDestroyElement () {
  this._super(...arguments);
  $(window).off("resize");
},

handleResize (e) {
  console.log(e)
},

---

而不是

Ember.run.next

，您应该覆盖

didInsertElement

元素，而不是

init

。Ember文档：“覆盖[didInsertElement]进行任何需要文档正文中元素的设置”而不是

Ember.run.next

，您应该覆盖

didInsertElement

元素，而不是

init

。Ember文档：“覆盖[didInsertElement]进行任何需要文档正文中元素的设置”