如何在骨干渲染功能之外获取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'); 
  } 
});