Question

我正在使用Backbone渲染一个正方形的tile元素，我在其中设置高度，然后动态设置宽度以匹配高度。但是，在尝试获取元素高度时，我会返回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方法中设置断点并检查它来测试。$ el.parent（）。你可能想要几个父母来确保父元素在DOM中。

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

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

动态设置元素高度和宽度

1 个答案: