What is the difference between $el and el in Backbone.js views?

Question

Can you please tell the difference between $el and el in Backbone.js views?

Ita

Have you checked it in the documentation? – Spendthrift

possible duplicate of Why would a JavaScript variable start with a dollar sign? – Canvass

I did not get what does this statement mean "cached jQuery object" for $sl – Ita

It's just a reference to the jquery object and saves you looking it up each time it's used which can be bad for performance. – Chanukah

this.$el = $(this.el), more or less. – Puppis

Possible duplicate of What's the difference between: $(this.el).html and this.$el.html – Politian

Answer 1

"el"  is HTMLElement
"$el" is jQuery 
 

lets say that you do this

var myel = this.el; // here what you have is the html element, 
                    //you will be able to access(read/modify) the html 
                    //properties of this element,

with this

var my$el = this.$el; // you will have the element but 
                      //with all of the functions that jQuery provides like,
                      //hide,show  etc, its the equivalent of $('#myel').show();
                      //$('#myel').hide(); so this.$el keeps a reference to your 
                      //element so you don't need to traverse the DOM to find the
                      // element every time you use it. with the performance benefits 
                      //that this implies.

one is the html element and the other is the jQuery object of the element.

Toweling

Is it valid to write query on this.$el ? For example write this.$el(".some-class") in order to get element with .some-class that is contained in view's html. – Waxwing

Not for me, this.$el('.class') nets me $el is not a function, i have to use find: this.$el.find('.class') – Stern

@JamesLock you need to use this.$('.class'). You're confusing a jQuery object with jQuery's core function. this.$el('.class') is like $('.selector')('.class'), it doesn't work like that. – Politian

I think it is helpful explicitly differentiating their types rather than calling both simply elements. $el is jQuery type and el is HTMLElement type. – Linnea

Answer 2

mu is too short is exactly right:

this.$el = $(this.el);

And it's easy to understand why, look at the view's _setElement function:

_setElement: function(el) {
  this.$el = el instanceof Backbone.$ ? el : Backbone.$(el);
  this.el = this.$el[0];
},

This ensures that the el property is always a DOM element, and that the $el property is always a jQuery object wrapping it. So the following is valid even though I used a jQuery object as the el option or property:

// Passing a jQuery object as the `el` option.
var myView = new Backbone.View({ el: $('.selector') });
// Using a jQuery object as the `el` View class property
var MyView = Backbone.View.extend({
    el:  $('.selector')
});

What is a cached jQuery object?

It's a jQuery object assigned to a variable for reuse purpose. It avoids the costly operation of finding the element through the DOM with something like $(selector) each time.

Here's an example:

render: function() {
    this.$el.html(this.template(/* ...snip... */));
    // this is caching a jQuery object
    this.$myCachedObject = this.$('.selector');
},

onExampleEvent: function(e) {
    // Then it avoids $('.selector') here and on any sub-sequent "example" events.
    this.$myCachedObject.toggleClass('example');
}

See an extensive answer I wrote to know more.

Politian

Answer 3

In short, el gives you access to HTML DOM elements, i.e you can refer and access them, whereas $el is jQuery wrapper around el.

$el not only provides access to particular DOM element, moreover it acts as a jQuery selector and you have privilege to use jQuery library functions like show(), hide(), etc on the particular DOM element.

Vonnie

It is in terms of jQuery and question is about backbone.js – Variolous

Answer 4

It is so late to answer it but --> 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.

Colyer