What’s the difference between: $(this.el).html and this.$el.html


What’s the difference between: $(this.el).html and this.$el.html

What’s the difference between:


Reading a few backbone examples and some do it one way and other another way.


Solution 1:

$(this.el) wraps an element with jQuery (or Zepto). So, if your view HTML was this:

<div id="myViewElement"></div>

…and this.el referenced that div, then $(this.el) would be the equivalent of retrieving it directly via jQuery: $('#myViewElement').

this.$el is a cached reference to the jQuery (or Zepto) object, so a copy of what you would get from calling $(this.el). The intent is to save you the need to call $(this.el), which may have some overhead and therefor performance concerns.

Please note: the two are NOT equivalent. this.el alone is a reference to a host object HTMLElement — no libraries involved. This is the return of document.getElementById. $(this.el) creates a new instance of the jQuery/Zepto object. this.$el references a single instance of the former object. It is not “wrong” to use any of them, as long as you understand the costs of multiple calls to $(this.el).

In code:

this.ele = document.getElementById('myViewElement');
this.$ele = $('#myViewElement');

$('#myViewElement') == $(this.ele);

Also, it is worth mentioning that jQuery and Zepto have partial internal caches, so extra calls to $(this.el) might end up returning a cached result anyway, and that’s why I say “may have performance concerns”. It also may not.


Solution 2:

The two are essentially* equivalent, with $el being a cached version of the jQuery or Zepto objects el, the reason why you see examples using $(this.el) is because it was only added in a later release of backbone.js (0.9.0).

*Technically as Chris Baker points out $(this.el) will (probably) create a new jQuery/Zepto object each time you call it while this.$el will reference the same one each time.

Solution 3:

If $el exists on this and is a jQuery object, you shouldn’t use $(this.el) because it would be initializing a new jQuery object when one already exists.

Solution 4:

They yield exactly the same thing; that is, a reference to a view’s element. $el is simply a jquery wrapper for $(this.el). Look at this reference: http://documentcloud.github.com/backbone/#View-$el

Solution 5:

I usually see this:

var markup = $(this).html();
$(this).html('<strong>whoo hoo</strong>');

I agree with Raminon. Your examples you’ve seen look wrong.

This code is typically seen within a jquery loop, such as each(), or an event handler. Inside the loop, the ‘el’ variable will point to the pure element, not a jQuery object. The same holds true for ‘this’ inside an event handler.

When you see the following: $(el) or $(this), the author is getting a jQuery reference to the dom object.

Here’s an example I just used to convert numbers to roman numerials:
(Note, I always use jQuery instead of $ — too many collisions with mootools…)

        var span = jQuery(el);

Solution 6:

Wrapping an element in $() appends the jQuery extensions to the object prototype. Once that’s done it doesn’t need to be done again, although there’s no harm other than performance in doing it multiple times.