javascript - 为什么我无法在主干 View 中获取元素的高度？

Question

我试图在渲染后重新定位主干 View 中的元素，但无法获得高度。我已经解决了 setTimeout，但我仍然非常困惑和沮丧。为什么 height() 仅在 Backbone ​​渲染函数内部返回 null？？

我已经成功地在 jsfiddle 中重现:http://jsfiddle.net/turpana/3nh9916a/2/

Answer 1

那是因为您是在 render 调用之后而不是之前将 view.$el 插入到 DOM 中。如果在实例化 View 时指定 el

var view = new View( { el : $('.bb-container') } ); 

然后 render 中的 this.$el 将已经插入到 DOM 中，并且您的 height() 将正常工作 updated jsfiddle :

// in backbone view
var View = Backbone.View.extend({
    render: function () {
        this.$el.html('<p class="hello">hello</p>');
        var heightInline = $('.hello').height();
        setTimeout(function () {
            var heightInTimeout = $('.hello').height();
            $('.heights').append(
                '<p><strong>In backbone view:</strong></p>'
                + '<p>height inline: ' + heightInline + '</p>'
                + '<p>height after 1 ms: ' + heightInTimeout + '</p>'
             );

        }, 1);
        return this;
    }
});
var view = new View( { el : $('.bb-container') } ) 
view.render()
// just jquery
$('.jq-container').html('<p class="hello-again">hello again</p>');
var jqHeightInline = $('.hello-again').height();
$('.heights').append(
    '<p><strong>With just jQuery:</strong></p>'
    + '<p>height: ' + jqHeightInline + '</p>'
    );