Qual è la differenza tra $ el ed el nelle viste Backbone.js?

Question

Puoi vedere la differenza tra $el e el nelle visualizzazioni Backbone.js?

Answer 1

Diciamo che si esegue questa operazione

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 questo

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 è l'elemento html e l'altro è l'oggetto jQuery dell'elemento.

Answer 2

E 'così tardi per rispondere, ma -> this.$el è un riferimento all'elemento nel contesto di jQuery, tipicamente per l'uso con le cose come .html() o .addClass(), ecc Ad esempio, se si ha un div con id someDiv, e si imposta il el proprietà della vista Backbone, le seguenti affermazioni sono identiche:

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

this.el è l'elemento DOM nativo, toccato da jQuery.

Answer 3

mu is too short è esattamente a destra:

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

ed è facile capire perché, cerca nella view's _setElement function:

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

Questo assicura che el è sempre un Elemento DOM e quello $el è sempre un oggetto jQuery di esso. Così vale quanto segue, anche se ho usato un oggetto jQuery come opzione el o la proprietà:

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

Che cosa è un oggetto jQuery cache?

È un oggetto jQuery mantenuto all'interno di una variabile per scopi di riutilizzo. Evita l'operazione costosa di trovare l'elemento con qualcosa come $(selector) ogni volta.

Ecco un esempio:

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

vedere una extensive answer ho scritto di saperne di più.

Answer 4

In breve, el consente di accedere agli elementi DOM HTML, quindi è possibile fare riferimento e accedervi, mentre $ el è jQuery wrapper around el.

$ el non solo fornisce accesso a un particolare elemento DOM, inoltre funge da selettore jQuery e si ha il privilegio di utilizzare le funzioni della libreria jQuery come show(), hide(), ecc. Sul particolare elemento DOM.