What is the difference between $el and el ?
this.el can be resolved from the DOM or element selection string; otherwise, it will be created from the view tagName , className , id and attributes . If none are set, this.el is an empty div , which is often very good.
This is a reference to a DOM object object. Do not set el directly , use the view.setElement method instead if you want to change it.
The cached jQuery object for the view element. A convenient link instead of repacking the DOM element all the time.
I like the way mu user puts it too short :
this.$el = $(this.el);
Also do not set $el directly, use the view.setElement method.
el option
The el link can also be passed to the view constructor.
new Backbone.View({ el: '#element' }); new Backbone.View({ el: $('#element') });
It overrides the el property, which is then used for the $el property.
If a selector string is passed, it is replaced by the DOM element that it represents.
Why assign $('#footer') el?
this.el may be a jQuery object. You can see that the Backbone will verify that el is a DOM element and $el is its jQuery object 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 equivalent to $(this.el) .
The array maintains a reference to everything that is $ .
For the purposes of the base objects, jQuery, Zepto, Ender, or My Library (joke) has a $ variable.
In our case, $ is jQuery, so Backbone.$ Is just jQuery, but the dependencies between the database are flexible:
Trunk hard dependency Underscore.js (> = 1.8.3). For Persistence, RESTful and DOM using Backbone.View , include jQuery (> = 1.11.0) and json2. js for older support for Internet Explorer. (Mimics of Underscore and jQuery APIs such as Lodash and Zepto will also work with varying degrees of compatibility.)
this.$(selector) equivalent to $(view.el).find(selector)
In fact, it's a little more efficient , the $ function looks simple:
$: function(selector) { return this.$el.find(selector); },
What is a cached jQuery object?
In this case, it only means that the jQuery object is stored inside a variable that is reused inside the view. This avoids the costly operation of finding an element with $(selector) every time.
You can (and should) use this small optimization when possible, for example, inside the render function:
render: function() { this.$el.html(this.template(/* ...snip... */)); // this is caching a jQuery object this.$myCachedObject = this.$('.selector'); }, onExampleEvent: function(e) { // avoids $('.selector') here and on any sub-sequent example events. this.$myCachedObject.toggleClass('example'); }
The prefix of a jQuery-cached object variable with $ is the standard, not the requirement.
The basic source code is less than 2000 lines, it is well documented and easy to read. I urge everyone to immerse themselves in it to easily understand the basic logic.
They also offer an annotated source page that is even easier to read.
Additional reading