Backbone: ¿Por qué asignar `$ (‘# footer’)` a `el`?

Encontré las siguientes declaraciones:

el: '#footer'

var todosView = new TodosView({el: $('#footer')});

¿Por qué asignar $('#footer') a el ? Esto es lo que realmente me confundió. Leí la publicación aquí, ¿Cuál es la diferencia entre $ el y el en las vistas de Backbone.js? , sigo confundido.

Además, leí: La propiedad view.$el es equivalente a $(view.el) y view.$(selector) es equivalente a $(view.el).find(selector) . En nuestro método de renderizado del ejemplo de TodoView, vemos this.$el usado para establecer el HTML del elemento y this.$() Usado para encontrar los subelementos de la clase ‘editar’.

Pero, alguien dijo: si llamas $(this.el) , simplemente sigue ejecutando el selector jquery para obtener el mismo objeto jquery. ‘$ el’ es la versión en caché de $(this.el)

¿Qué es la “versión en caché”?

¿Cuál es la diferencia entre $el y el ?

La propiedad de vista

this.el se puede resolver desde una cadena de selector DOM o un Elemento; de lo contrario, se creará a partir de las propiedades tagName , className , id y attributes de la vista. Si no se establece ninguno, this.el es un div vacío, que a menudo está bien.

Es una referencia de objeto de elemento DOM. No establezca el directamente , use el método view.setElement en su lugar si desea cambiarlo.

La propiedad $el

Un objeto jQuery en caché para el elemento de la vista. Una referencia útil en lugar de volver a envolver el elemento DOM todo el tiempo.

Me gusta cómo el usuario mu es demasiado corto lo pone :

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

Además , no configure $el directamente, use el método view.setElement .

La opción el

También se puede pasar una referencia el en el constructor de la vista.

 new Backbone.View({ el: '#element' }); new Backbone.View({ el: $('#element') }); // unecessary 

Anula la propiedad el, que luego se usa para la propiedad $el .

Si se pasa una cadena de selector, se reemplaza con el elemento DOM que representa.

¿Por qué asignar $('#footer') a el?

this.el puede ser un objeto jQuery. Puedes ver que Backbone se asegura de que el es un elemento DOM y $el es un objeto jQuery de él en la función _setElement :

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

Esto muestra por qué this.$el es equivalente a $(this.el) .

Pero, ¿qué es Backbone.$ ?

Backbone guarda una referencia a lo que sea $ .

A los fines de Backbone, jQuery, Zepto, Ender o My Library (es broma) posee la variable $ .

En nuestro caso, $ es jQuery, por lo que Backbone.$ Es solo jQuery, pero las dependencias de Backbone son flexibles:

La única dependencia dura de Backbone es Underscore.js (> = 1.8.3). Para la persistencia RESTful y la manipulación de DOM con Backbone.View , incluya jQuery (> = 1.11.0) y json2.js para el soporte anterior de Internet Explorer. (Las características de las API Underscore y jQuery, como Lodash y Zepto , también tenderán a funcionar, con diversos grados de compatibilidad).

this.$(selector) es equivalente a $(view.el).find(selector)

De hecho, es un poco más eficiente , la función $ view es justa:

 $: function(selector) { return this.$el.find(selector); }, 

¿Qué es un objeto jQuery almacenado en caché?

En este caso, solo significa que un objeto jQuery se mantiene dentro de una variable, que se reutiliza dentro de la vista. Evita la operación costosa de encontrar el elemento con $(selector) cada vez.

Puedes (y deberías) usar esta pequeña optimización siempre que sea posible, como dentro de la función de render :

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

La prefijación de la variable de objeto en caché jQuery con $ es solo un estándar, no un requisito.


El código fuente de Backbone es de menos de 2000 líneas, está bien documentado y es fácil de leer. Animo a todos a profundizar en él para comprender fácilmente la lógica subyacente.

También ofrecen una página fuente anotada que es aún más fácil de leer.

Lectura adicional

  • Comience aquí: documentación de backbone
  • Introducción a Backbone
  • Patrones de backbone
  • Mejores prácticas con Backbone