How to reactively watch for an element width change ?
For example, if the element would change its width, I want to change its height reactively?
My code so far:
Template.photosListPhoto.onCreated(function () {
this.elementWidth = new ReactiveVar();
});
Template.photosListPhoto.onRendered(function () {
var self = this;
self.autorun(function () {
var currentWidth = self.$('li').width();
self.elementWidth.set(currentWidth);
});
});
Template.photosListPhoto.helpers({
computedHeight: function () {
var ratio = this.width / this.height;
return Template.instance().elementWidth.get() / ratio;
}
});
This is not reactive & does not update in autorun function, only on first run.
Any advices/thoughts?