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

我正在尝试在渲染后在主视图中重新定位元素，但无法获得高度。我已经使用setTimeout解决了问题，但是我仍然非常困惑和沮丧。为什么height（）仅在主干渲染函数内部返回null？

我设法在jsfiddle中复制：http://jsfiddle.net/turpana/3nh9916a/2/

最佳答案

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

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

那么this.$el中的render将已经插入到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>'
    );