Question

这可能更像是一个javascript问题，但我正在阅读这个骨干教程，并想知道为什么在这一行的末尾有一个。$ 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元素的引用。骨干视图本身不是DOM元素，它们是通用的javascript对象，它们具有一个名为$el的属性，它保存DOM元素，这是您在网页上实际看到的内容。您可以将骨干视图视为DOM元素的各种控制器，当您向视图添加事件侦听器，定义渲染等时，您始终会对存储在$el中的DOM元素进行操作（{{ 1}}是与$el相同的DOM元素，前者与jQuery很好地配合使用。在这种情况下，您的观点为el，如果我们中断BlogView：

new BlogView({ model: blog})).render().$el - 创建视图实例，骨干网会自动为您的视图创建DOM元素并将其存储在new BlogView
yourView.$el - 告诉视图在.render()元素中呈现其HTML。在Backbone中，我们的渲染功能是生成HTML标记/格式数据的地方，并通过将此标记推入视图的$el来“绘制”视图。
$el - render().$el返回render()这只是我们自己的观点，因此调用this就像是在说“渲染我的视图并返回我的DOM元素。
render().$el - 这个代码块因此被赋予我们的DOM元素self.$el.append(..)，然后将其插入。

所以把它们放在一起得到：$el首先创建我们的视图，渲染我们的视图并返回我们的视图的DOM元素，它可以附加到页面，操纵等等。

为什么。需要$ el，它指的是什么？

1 个答案: