如何在骨干渲染功能之外獲取clientHeight值？

Question

我使用zynga scroller javascript在主干web-app中滾動但是renderof元素的clientHeight始終為0.這是因為滾動腳本在主干渲染方法之前加載並執行。

    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});
    },

可以在渲染后執行滾動javascript的加載嗎？ 或任何其他解決方案？ 從滾動腳本：

EasyScroller.prototype.reflow = function() {

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

};

感謝您的任何幫助！

Answer 1

這就是EasyScroller功能的添加方式：

當文檔被完全加載和解析時，將搜索文檔以查找具有數據data-scrollable和data-zoomable數據屬性的所有元素。 對於每個這樣的元素，都會創建EasyScroller實例，它會添加滾動功能。

在Backbone應用程序中，由於我們修改了dom樹，我們需要顯式創建EasyScroller實例。

將內容分配給Backbone view的el元素后，您可以動態地將EasyScroller附加到它。 您不需要使用此方法將data-scrollable屬性添加到el元素。

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;
});

Answer 2

在這里和這里找到了這段代碼

基本上將beforeRender（）和afterRender（）包裝到默認的渲染函數並擴展它們，以便您可以編寫一些代碼，以便在需要時執行。 范圍與渲染范圍相同。 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'); 
  } 
});