javascript - 如何在 Backbone 渲染功能之外获取 clientHeight 值？

Question

我使用 zynga scroller用于在主干网络应用程序中滚动的 javascript，但渲染元素的 clientHeight 始终为 0。这是因为滚动脚本是在 backbone 渲染方法之前加载和执行的。

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