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:
$(this.el).html

and
this.$el.html

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

Solutions/Answers:

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.

Related:  Javascript - Variable in function name, possible?

Documentation

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.

Related:  jquery - get text for element without children text

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…)

jQuery(document).ready(function(){
    jQuery('.rom_num').each(function(idx,el){
        var span = jQuery(el);
        span.html(toRoman(span.text()));
    });
}); 

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.

References