javascript - Backbone this.el vs this.$el - Stack Overflow

admin管理员组

文章数量:1405131

For the given example, what is the difference between this.el & this.$el

I understand that this.$el points to the jQuery object of this.el , which in this case is 'li'.

When I render a view, I can choose between this.el, or this.$el. How am I able to render something to a page when I reference the jQuery object? I can see how using this.$el.html(property), points to the html, but why appending this.$el and having it render is what confuses me.

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});

For the given example, what is the difference between this.el & this.$el

I understand that this.$el points to the jQuery object of this.el , which in this case is 'li'.

When I render a view, I can choose between this.el, or this.$el. How am I able to render something to a page when I reference the jQuery object? I can see how using this.$el.html(property), points to the html, but why appending this.$el and having it render is what confuses me.

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});

• javascript
• jquery
• backbone.js

Share Follow edited Jan 19, 2016 at 2:04 Irwin 12.8k1212 gold badges7272 silver badges9797 bronze badges asked Mar 10, 2014 at 15:17 seasickseasick 1,24522 gold badges1717 silver badges2929 bronze badges 2

• 1 If you need jQuery methods or the cross browser support it brings, use this.$el, otherwise use the native DOM methods with this.el – Bojangles Commented Mar 10, 2014 at 15:19
• 1 Possible duplicate of What's the difference between: $(this.el).html and this.$el.html – pd12 Commented Jan 19, 2016 at 1:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Bojangles is correct.

this.$el is a reference to the element in the context of jQuery, typically for use with things like .html() or .addClass(), etc. For example, if you had a div with id someDiv, and you set it to the el property of the Backbone view, the following statements are identical:

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

this.el is the native DOM element, untouched by jQuery.

本文标签： javascriptBackbone thisel vs thiselStack Overflow