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

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.

Answer 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/#$()

Answer 2

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.

Answer 3

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()));
    });
}); 

Answer 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

Answer 5

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

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