backbone 中的 el 和 $el 是什么？

Question

我试图避免在 backbone 中呈现视图时用空 div 换行。我用下面的代码

this.$el.replaceWith(this.template(this.model.attributes));
return this;

但是当我通过

附加此视图时，我得到空 div

$("#product-pannel").append(productsView.render().el);

有人给出这样的解决方案

render: function(){
    var html = this.template(this.model.toJSON()));
    var newElement = $(html)
    this.$el.replaceWith(newElement);
    this.setElement(newElement);
    return this;
}

但是我不明白为什么我要在上面做这么复杂谁能告诉我 el 和 $el 的奥秘？

Answer 1

el points to the the view element (the one that holds rest of template) and $el 是一个 jQuery 对象 represeting el 元素所以你不必一直做 $(this.el)。

文档中明确提到了这一点。

您可以使用 el 选项将现有的 DOM 元素指定为视图元素，或者 backbone 为每个视图创建一个 DOM 元素。默认情况下，这将是 <div>。如果您不想要空的 <div>，请使用 tagName、attributes 等选项自定义 backbone 创建的元素作为视图模板的顶级元素。

setElement 用于将视图元素动态更改为其他内容...我很少（或从未）看到它实际被使用。

backbone 中的 el 和 $el 是什么？

What are el and $el in backbone's view?

javascript

backbone.js

zepto