如何获取主干视图中的尺寸（高度/宽度）信息？

Question

在我的主干应用程序的渲染功能中，我想用空行填充表格的其余部分以实现交替行外观，但我不知道要添加多少行。我尝试了 this.el.clientHeight、$(this.el).height() 以及此类函数的所有其他排列，让它们全部返回 0。有谁知道怎么办？我也不想添加太多以免引入滚动条。

var bar = Backbone.View.extend({
    initialize: function(){
        _.bindAll(this, "render");
    },

    render: function(){
        var html = "<h1>Hi!</h1>";
        $(this.el).html(html);
        var myWidth = this.el.width();
        alert(myWidth);
        return this;
    }

});



var foo = Backbone.View.extend({
    el: $('#myElement'),

    initialize: function(){
        _.bindAll(this, "render");
        this.subview = new bar();
    },

    render: function(){
        $(this.el).append(this.subview.render().el);
        return this;
    }

});

对于那些遇到与我相同问题的人的解决方案：您必须等待元素完全附加到 dom 才能获取高度/宽度信息。为了解决这个问题，我在渲染完全完成后添加了一个渲染后调用，该调用返回并处理任何小细节。

Answer 1

在某些浏览器上，宽度和高度信息在设置 html 后不会立即可用。原因是你已经更新了 DOM，但浏览器可能还没有布局新页面。

在过去，我采用将调用推迟一个时间点的方式，以便浏览器有时间在您测量之前赶上。您可以使用 underscore.defer() 来实现此目的。例如：

render: function(){
  var html = "<h1>Hi!</h1>";
  $(this.el).html(html);
  _.defer(_.bind(function() {  
    alert($(this.el).width());
  }, this);
  return this;
}

此外，jQuery.width() 可能会为您提供比 clientWidth 更好的兼容性。祝你好运！

Answer 2

尝试在附加它后获取高度（因此在“foo”而不是“bar”中）。

例如在“foo”中

    render: function(){

    $(this.el).append(this.subview.render().el);
    alert($(this.subview.el).height());
    return this;
}

Answer 3

你的观点应该是这样的：

var myView = Backbone.View.extend({
    el: $('#myElement'),

    initialize: function(){
        _.bindAll(this, "render");
    },

    render: function(){
        var myHeight = this.el.height();
        alert(myHeight);
        return this;
    }

});

希望有帮助