主干this.el与此.$el

Question

对于给定的示例，this.el和this.$el的区别是什么？

据我所知，this.$el指向this.el的jQuery对象，在本例中是'li'。

在呈现视图时，可以在this.el或this.$el之间进行选择。当我引用jQuery对象时，我如何能够将某些东西呈现给页面呢？我可以看到如何使用this.$el.html(property)，指向html，但是为什么追加this.$el并让它呈现才是让我困惑的原因。

var Person = Backbone.Model.extend({
    defaults: {
        name: 'John Doe',
        age: 30,
        occupation: 'worker'
    }
});

var PersonView = Backbone.View.extend({
    tagName: 'li',

    initialize: function() {
        this.render();
    },

    render: function() {
        var out = this.$el.html(this.model.get('name') + this.model.get('occupation'));
        console.log(this, this.el, this.$el, out);
        $('body').append(this.$el);
    },

});

var person = new Person;
var personview = new PersonView({model: person});

Answer 1

博雅尔是对的。

this.$el是对jQuery上下文中元素的引用，通常用于.html()或.addClass()等。例如，如果您有id someDiv的div，并将其设置为主干视图的el属性，则以下语句是相同的：

this.$el.html() $("#someDiv").html() $(this.el).html()

this.el是本机DOM元素，不受jQuery的影响。