CODEWITHSUNDEEP
javascriptjquerybackbone.js
CLiown
CLiown

Reputation: 13843

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.

Upvotes: 37

Views: 39829

Answers (6)

Jack
Jack

Reputation: 10993

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.

Upvotes: 6

Chris Baker
Chris Baker

Reputation: 50592

$(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

Upvotes: 56

Brendan Delumpa
Brendan Delumpa

Reputation: 1145

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

Upvotes: 2

Perry Tew
Perry Tew

Reputation: 2632

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

Upvotes: 1

Matt S
Matt S

Reputation: 15374

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.

Upvotes: 0

Kevin B
Kevin B

Reputation: 95023

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.

Upvotes: 2

Related Questions