Question

我使用zynga scroller javascript在主干网络应用中滚动，但渲染元素的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的{{1}}元素后，您可以动态地将el附加到其中。您无需使用此方法将EasyScroller元素添加到data-scrollable元素。

el

Answer 2

找到这段代码，here和here

基本上将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'); 
  } 
});

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

2 个答案: