How can I get clientHeight value outside backbone render function?

Question

I using zynga scroller javascript for scrolling in backbone web-app but clientHeight of rendered element is always 0. This is because script for scrolling is loaded and executed before backbone 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 possible to execute loading of scroller javascript after render? Or any other solutions? From scrolling script:

EasyScroller.prototype.reflow = function() {

    this.scroller.setDimensions(this.container.clientWidth, this.container.clientHeight, this.content.offsetWidth, this.content.offsetHeight);

};

Thank you for any help!

Have you added `data-scrollable="y"` attribute to the view's el element? — Manish Mulimani, Aug 25 '14 at 18:04
@ManishMulimani Yes I have. Scroll efect is working but only efect not scrolling. Page has behavior like overflow hide. If I change attribute clientHeight in javascript to specific value (example 1200) everything is working like I want, but you know height is set manualy and I need it variable.... — Makromat, Aug 25 '14 at 20:22

Manish Mulimani · Accepted Answer · 2014-08-26T03:23:22.090

1

This is how EasyScroller functionality is added:

When the document is fully loaded and parsed, the document is searched for all elements with data attributes data-scrollable and data-zoomable. For each such element, EasyScroller instance is created, which adds the scrolling functionality.

In Backbone applications, since we modify the dom tree, we need to create the EasyScroller instance explicitly.

After assigning content to Backbone view's el element, you can dynamically attach the EasyScroller to it. You need not add data-scrollable attribute to the el element, with 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;
});

edited Aug 26 '14 at 03:23

answered Aug 26 '14 at 00:44

Manish Mulimani

17,535
2
41
60

I have edited my code. My render function is like your and I have already removed `data-scrollable="y"` from content element. Now I see same `bug` efect is working but page did not scroll. – Makromat Aug 27 '14 at 22:03
@Makromat I've committed my code in [github](https://github.com/manishcm/easyscroller). You can check it out. – Manish Mulimani Aug 28 '14 at 03:50
Thanks a lot it is working better. Look to my repository [Github](https://github.com/makromat/app) Page has never-ending scroll function...without end... Do you have idea why ? – Makromat Aug 30 '14 at 16:58
@Makromat I've git cloned your app and made changes in the [clone repo](https://github.com/manishcm/app). Issue was solved by applying styling to the div element to which easy scroller functionality will be attached. – Manish Mulimani Aug 30 '14 at 18:25
Thanks a lot @Manish Mulimani, it is working but, is possible to do it without set height of container? Thanks – Makromat Aug 31 '14 at 08:45
@Makromat I will check and let you know. – Manish Mulimani Sep 02 '14 at 17:42

score 0 · Answer 2 · edited May 23 '17 at 11:43

Found this piece of code, here and here

Basically wraps beforeRender() and afterRender() to the default render function and extends them so you can write some code to be executed when you need it. Scope is the same as render 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'); 
  } 
});

How can I get clientHeight value outside backbone render function?

2 Answers2