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