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?

Answer 1

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.

Answer 2

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.