What is the difference between: $ (this.el) .html and this. $ El.html

Question

What is the difference between:

$(this.el).html 

and

 this.$el.html 

Reading a few master's examples, and some do it the same way.

Answer 1

$(this.el) wraps an element using jQuery (or Zepto). So, if your HTML code looks like this:

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

... and this.el refer to a div, then $(this.el) will be the equivalent of getting it directly through jQuery: $('#myViewElement') .

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

Please note: both are not equivalent. this.el only a reference to an object object HTMLElement - libraries are not involved. This returns document.getElementById . $(this.el) creates a new instance of the jQuery / Zepto object. this.$el refers to one instance of the first object. You cannot use any of them if you understand the cost of several calls to $(this.el) .

In code:

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

In addition, it is worth mentioning that jQuery and Zepto have partial internal caches, so additional calls to $(this.el) may eventually return a cached result, and therefore I say "may have performance problems." It also cannot be.

Documentation

• view.$el - http://backbonejs.org/#View-$el
• $ in the trunk - http://backbonejs.org/#View-dollar
• jQuery base object - http://api.jquery.com/jQuery/
• The main object of Zepto is http://zeptojs.com/#$ ()

Answer 2

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

* _{Technically, as Chris Baker points out, $(this.el) will (possibly) create a new jQuery / Zepto object each time you call it, while this.$el will refer to the same every time.}

Answer 3

If $el exists in this and is a jQuery object, you should not use $(this.el) because it will initialize a new jQuery object if it already exists.

Answer 4

They give exactly the same thing; that is, a link to a view element. $ el is just a jquery wrapper for $ (this.el). Have a look at this link: http://documentcloud.github.com/backbone/#View- $ el

Answer 5

I usually see this:

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

I agree with Raminon. Your examples that you saw do not look right.

This code is usually displayed in a jquery loop, for example, each () or event handler. Inside the loop, the variable 'el' indicates a pure element, not a jQuery object. The same is true for 'this' inside the event handler.

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

Here is an example that I used to convert numbers to Roman numbers: (Note, I always use jQuery instead of $ - there are 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 6

Wrapping an element in $ () adds jQuery extensions to the prototype of the object. After this, it does not need to be done again, although there is no harm other than performance by doing this several times.