61

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

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
ali asad
  • 1,329
  • 4
  • 17
  • 23
  • 3
    Have you checked it in the [documentation](http://backbonejs.org/#View-el)? – nemesv May 20 '13 at 09:37
  • possible duplicate of [Why would a JavaScript variable start with a dollar sign?](http://stackoverflow.com/questions/205853/why-would-a-javascript-variable-start-with-a-dollar-sign) – Quentin May 20 '13 at 09:37
  • 1
    I did not get what does this statement mean "cached jQuery object" for $sl – ali asad May 20 '13 at 09:39
  • 4
    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. – net.uk.sweet May 20 '13 at 11:07
  • 9
    [`this.$el = $(this.el)`](http://backbonejs.org/docs/backbone.html#section-129), more or less. – mu is too short May 20 '13 at 16:35
  • Possible duplicate of [What's the difference between: $(this.el).html and this.$el.html](http://stackoverflow.com/questions/11512090/whats-the-difference-between-this-el-html-and-this-el-html) – Emile Bergeron Dec 19 '16 at 19:51

4 Answers4

84
"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.

Rayweb_on
  • 3,727
  • 20
  • 24
  • 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. – Matko Nov 16 '15 at 12:04
  • 2
    Not for me, `this.$el('.class')` nets me $el is not a function, i have to use find: `this.$el.find('.class')` – James Jan 26 '16 at 00:08
  • @JamesLock you need to use `this.$('.class')`. You're confusing a jQuery object with [jQuery's core function](http://api.jquery.com/jQuery/). `this.$el('.class')` is like `$('.selector')('.class')`, it doesn't work like that. – Emile Bergeron Oct 29 '16 at 17:58
  • 1
    I think it is helpful explicitly differentiating their types rather than calling both simply elements. `$el` is `jQuery` type and `el` is `HTMLElement` type. –  Sep 18 '22 at 08:41
6

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.

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
2

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.

Sourabh Bhavsar
  • 301
  • 3
  • 3
1

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.

Aasha joney
  • 508
  • 5
  • 23
Samin Fakharian
  • 63
  • 1
  • 10