为什么需要 .$el，它指向什么？

Question

这可能更像是一个 javascript 问题，但我正在阅读这个 backbone 教程并且想知道为什么在这一行的末尾有一个 .$el，而哪个它指向的元素是什么？

self.$el.append((new BlogView({ model: blog})).render().$el);

下面是完整的代码......

var BlogsView = Backbone.View.extend({
    model: blogs, 
    el: $('.blogs-list'),
    initialize: function() {
        this.model.on('add', this.render, this);
    },
    render: function() {
        var self = this;
        this.$el.html('');
        _.each(this.model.toArray(), function(blog) {
            self.$el.append((new BlogView({ model: blog})).render().$el);
        });
        return this;
    }
});

Answer 1

$el 是视图的 DOM 元素的引用。 Backbone 视图本身不是 DOM 元素，它们是通用的 javascript 对象，它有一个名为 $el 的属性，其中包含 DOM 元素您在网页上实际看到的内容。您可以将 backbone 视图视为 DOM 元素的某种控制器，并且当您向视图添加事件侦听器、定义渲染等时，您始终在对它进行操作 DOM 元素存储在 $el 中（$el 与 el 是相同的 DOM 元素，前者与 jQuery 配合得很好）。在这种情况下，您的观点是 BlogView 如果我们打破 new BlogView({ model: blog})).render().$el：

new BlogView - 创建视图实例，backbone 会自动为视图创建一个 DOM 元素并将其存储在 yourView.$el 中
.render() - 告诉视图在 $el 元素内呈现其 HTML。在 Backbone 中，我们的渲染函数是我们生成 HTML markup/format 数据和 "draw" 视图的地方，方法是将此标记推入视图的 $el.
render().$el - render() returns this 这只是我们的观点本身，所以调用 render().$el 就像在说“呈现我的视图和 return 我的 DOM 元素。
self.$el.append(..) - 此代码块因此被赋予我们的 DOM 元素 $el 然后插入它。

所以把它们放在一起我们得到：new BlogView({ model: blog})).render().$el 首先创建我们的视图，呈现我们的视图和 returns 我们视图的 DOM 元素，它可以附加到页面，操纵等

为什么需要 .$el，它指向什么？

Why is .$el needed, and what does it point to?

javascript

jquery

backbone.js