Generate a new computed property value on window resize

@therealbenhogan wrote:

I have a component which displays a list of posts bounded by a border. The initial listing of posts has variable text length, and hence the height of the containers is different. The component uses computed properties to find the maximum height of the containers and sets this height across all of them. This works fine for the initial render, but I’m stuck when I want to respond to window resizing events. The code below includes a function which needs to run on the resize, but how do I recalcuate the computed properties from that function? Or I am going about this in the wrong way!

Many thanks

import Component from '@ember/component';  
import { computed } from '@ember/object';
import $ from 'jquery';
import { run } from '@ember/runloop';
import { A } from '@ember/array';

export default Component.extend({

tagName: 'div',
height: null,
maxHeightArray: computed('height', function () {
	let array = A();
	$('.post-listing div.column-inner').each(function () {
		let height = $(this).innerHeight();
		array.push(height);
	});
	return array;
}),
maxHeight: computed.max('maxHeightArray'),
didRender() {
	let maxHeight = parseInt(this.get('maxHeight') + 50);
	$('.post-listing div.column-inner').innerHeight(maxHeight);
},
init() {
	this._super(...arguments);
	$(window).on('resize', run.bind(this, this.resizeWindow));
},
resizeWindow() {
	.... how to reset the computed properties from this function ? .....
}

Posts: 3

Participants: 2

Read full topic