How can I get the clientHeight value outside of the mainline render function?
I am using zynga scroller javascript to scroll in a basic web app, but the clientHeight from the element being displayed is always 0. This is because the script for scrolling is loaded and executed before the main line render method.
render: function(){
var persons = this.model;
var personsCollection = new PersonsCollection(persons);
this.el.innerHTML = _.template( personsTemplate,{data : _.groupBy(personsCollection.toJSON(), 'status')} );
console.log(this.el.clientHeight); // ========= 1500
new EasyScroller(this.el, {scrollingX: false, scrollingY: true});
},
Is it possible to load the javascript of the scroller after rendering? Or any other solutions? From a scrolling script:
EasyScroller.prototype.reflow = function() {
this.scroller.setDimensions(this.container.clientWidth, this.container.clientHeight, this.content.offsetWidth, this.content.offsetHeight);
};
Thanks for the help!
source to share
This is how EasyScroller is added :
When the document is fully loaded and analyzed, the document will search for all elements with data attributes data-scrollable
and data-zoomable
. For each such element, an instance is created EasyScroller
that adds scrolling functionality.
In Backbone applications, since we are modifying the dom tree, we need to explicitly create an instance EasyScroller
.
After assigning content to an element, Backbone view
el
you can dynamically attach to it EasyScroller
. You don't need to add an attribute data-scrollable
to an element el
using this approach.
define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
var HomeView = Backbone.View.extend({
template: _.template("<div data-i18n='view.name'></div>"),
render: function() {
this.$el.html(this.template);
// Now attach the EasyScroller element to the el element.
new EasyScroller(this.el, {scrollingX: false, scrollingY: true});
}
});
return HomeView;
});
source to share
Found this piece of code here and here
Basically wraps beforeRender () and afterRender () up to the default render function and extends them, so you can write code to be executed when you need it. The scope is the same as the rendering scope. GL!
var myView = Backbone.View.extend({
initialize: function(options) {
_.bindAll(this, 'beforeRender', 'render', 'afterRender');
var _this = this;
this.render = _.wrap(this.render, function(render) {
_this.beforeRender();
render();
_this.afterRender();
return _this;
});
},
beforeRender: function() {
console.log('beforeRender');
},
render: function() {
return this;
},
afterRender: function() {
console.log('afterRender');
}
});
source to share