BAE BAE - 10 months ago 51
Javascript Question

What is the difference between $el and el

I found the following statements:

el: '#footer'

var todosView = new TodosView({el: $('#footer')});

What is the difference between
? Why assign
(This is what really confused me. I read the post here, What is difference between $el and el in Backbone.js view?, still confused.)

Also, I read:
property is equivalent to
is equivalent to
. In our TodoView example’s render method, we see
used to set the HTML of the element and
used to find subelements of class ‘edit’.

But, someone said
If you call
, your just keep executing the jquery selector to get the same jquery object. '$el' is the cached version of

What is "cached version"?

Answer Source

What is the difference between $el and el?

The el view property

this.el can be resolved from a DOM selector string or an Element; otherwise it will be created from the view's tagName, className, id and attributes properties. If none are set, this.el is an empty div, which is often just fine.

The el option

An el reference may also be passed in to the view's constructor.

The $el property

A cached jQuery object for the view's element. A handy reference instead of re-wrapping the DOM element all the time.

Why assign $('#footer') to el?

this.el can be a jQuery object. You can see that Backbone make sure el is a DOM element and $el is a jQuery object of it in the _setElement function:

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

This shows why this.$el is equivalent to $(this.el).

But what is Backbone.$?

Backbone keeps a reference to whatever is $.

For Backbone’s purposes, jQuery, Zepto, Ender, or My Library (kidding) owns the $ variable.

In our case, $ is jQuery, so Backbone.$ is just jQuery.

this.$(selector) is equivalent to $(view.el).find(selector)

In fact, it's a little more efficient, the $ view function is just:

$: function(selector) {
  return this.$el.find(selector);

What is a cached jQuery object?

In this case, it only means that a jQuery object is kept inside a variable, which is reused inside the view. It avoids the costly operation of finding the element with $(selector) each time.

Backbone's source code is less than 2000 lines, it's well-documented and easy to read. I highly encourage everyone to dive into it to easily understand the underlying logic.

They also offer an annotated source page which is even easier to read.