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

Question

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.

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.

Documentation

• view.$el - http://backbonejs.org/#View-$el
• $ in backbone - http://backbonejs.org/#View-dollar
• jQuery base object - http://api.jquery.com/jQuery/
• Zepto base object - http://zeptojs.com/#$()

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

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

View more solutions

Comments

[Roko C. Buljan]

You'll loose your fingers one day typing jQuery over and over again and worrying about collisions. just do: (function($){ /*your jQuery codes here with bulletproof '$' */ })(jQuery);.

[Chris Baker]

(or quit using jQuery for things that don't need jQuery?)

[Perry Tew]

Meh. I have other reasons for over-using jQuery, and for typing it out. I overuse it because it has great cross-platform performance. As for typing it out, well, I'll buy bionic fingers someday -- just like those Ghost in the Shell chicks use. We have thousands of merchants. I deal with other-people's-code all day long. Tiny little snippets. When I have to provide code for dozens of sites a day, and in little snippets, I'm glad I spell out jQuery everytime. And finally, I think it reads faster spelled out. But, to each their own.

[robmisio]

Upvote for pointing out that the two are indeed different. They both reference objects that in turn reference the same underlying DOM element, and both are jQuery objects, but are copies of two different jQuery objects. It's a subtle difference, but nevertheless, a difference. I'm not really seeing any point in using the '$(this.el)' version, whereas reusing the other version is more efficient.