动态设置元素的高度和宽度

Question

我正在使用Backbone渲染一个正方形瓦片元素，在其中设置高度，然后动态设置宽度以匹配高度。 但是，当尝试获取元素的高度时，返回0 。

这是我的代码：

var app = app || {};

app.ClassModelView = Backbone.View.extend({
    className: 'tile',

    template: _.template('<%= name %>'),

    render: function() {
        var dim = 'calc(' + parseInt(100 / app.global.rows) + '% - ' + app.global.margin * (app.global.rows + 1) + 'px)'; //e.g. "30% - 20px"
        this.$el.append(this.template(this.model.attributes)).css({
            margin: app.global.margin + 'px',
            height: dim,
        }).css({
            width: this.$el.height() + 'px',
        });

        return this;
    }
})

如何将$el的宽度设置为高度？ 我不确定我在语法上做错了什么，还是我使用Backbone的方式导致了我的问题。

Answer 1

我过去也遇到过类似的问题。 在大多数情况下，这是因为我的视图已渲染，但尚未插入DOM。 在处理嵌套视图时，这很常见。

您可以通过在onRender方法中设置一个断点并检查this。$ el.parent（）来进行测试。 您可能要上几个父级，以确保父级元素在DOM中。

您可以通过绑定到DOMNodeInserted事件来解决此问题：

this.$el.on('DOMNodeInserted', function(e) { console.log($(e.target).outerHeight()); })