¿Cuál es la diferencia entre $ el y el en las vistas de Backbone.js?

¿Puedes decir la diferencia entre $el y el en las vistas de Backbone.js?

digamos que haces esto

 var myel = this.el; // here what you have is the html element, //you will be able to access(read/modify) the html //properties of this element, 

con este

 var my$el = this.$el; // you will have the element but //with all of the functions that jQuery provides like, //hide,show etc, its the equivalent of $('#myel').show(); //$('#myel').hide(); so this.$el keeps a reference to your //element so you don't need to traverse the DOM to find the // element every time you use it. with the performance benefits //that this implies. 

uno es el elemento html y el otro es el object jQuery del elemento.

mu es demasiado corto es exactamente correcto:

 this.$el = $(this.el); 

Y es fácil entender por qué, mire la function _setElement la vista :

 _setElement: function(el) { this.$el = el instanceof Backbone.$ ? el : Backbone.$(el); this.el = this.$el[0]; }, 

Esto asegura que el siempre es un elemento DOM, y que $el es siempre un object jQuery de él. Por lo tanto, lo siguiente es válido aunque utilicé un object jQuery como la opción o propiedad el:

 var myView = new Backbone.View({ el: $('.selector') }); // or var MyView = Backbone.View.extend({ el: $('.selector') }); 

¿Qué es un object jQuery almacenado en caching?

Es un object jQuery guardado dentro de una variable para fines de reutilización. Evita la operación costosa de encontrar el elemento con algo como $(selector) cada vez.

Aquí hay un ejemplo:

 render: function() { this.$el.html(this.template(/* ...snip... */)); // this is caching a jQuery object this.$myCachedObject = this.$('.selector'); }, onExampleEvent: function(e) { // avoids $('.selector') here and on any sub-sequent example events. this.$myCachedObject.toggleClass('example'); } 

Vea una respuesta extensa que escribí para saber más.

Es muy tarde para responderlo, pero -> this.$el es una reference al elemento en el context de jQuery, por lo general para usar con cosas como .html() o .addClass() , etc. Por ejemplo, si tenía un div con id someDiv, y lo estableciste en la propiedad el de la vista Backbone, las siguientes afirmaciones son idénticas:

 this.$el.html() $("#someDiv").html() $(this.el).html() 

this.el es el elemento DOM nativo, no tocado por jQuery.