Ember: изменение размера окна в компоненте

Question

У меня есть компонент, который отображает выбор изображений, и у меня есть CSS для «маски наведения», который затем покрывает изображение, отображая некоторую информацию об этом изображении, когда пользователь наводит Это.

Размеры маски наведения должны совпадать с размерами изображения при первом загрузке приложения и при изменении размера окна.

Вот основной наценка

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

Вот CSS:

.call-out-item { 
    position:relative; 
    display:none; 
} 

.call-out-item .hover-mask { 
    position:absolute; 
    top:0; 
    left:0; 
} 

.call-out-item:hover .hover-mask { 
    opacity: .95; 
    background: rgba(33,153,232,0.8); 
    cursor:pointer; 
} 

Вот мой код компонента (не уверен в правильном использовании Ember.run.next()

!

// other component code here 

const {$} = Ember; 

init() { 
    this._super(...arguments); 
    this.handleResize = function() { 
    let itemWidth = $(".call-out-item img").width(); 
    let itemHeight = parseInt(itemWidth/1.5); 
    $(".hover-mask").css({"width":itemWidth,"height":itemHeight}); 
    }.bind(this); 
    Ember.run.next(this, this.handleResize); 
    $(window).on('resize', Ember.run.bind(this, this.handleResize)); 
}, 
// etc etc 

Я получаю переменные результаты с помощью этого кода в Chrome и Firefox, поэтому должно быть что-то не так!

Answer 1

Убедитесь, что вы отвязать событие, когда компонент разрушается, в противном случае событие будет продолжать срабатывать, даже если пользователь находится на других маршрутах

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

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

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

Answer 2

Это мое решение. Одна из проблем (в 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