javascript - body - Backbone: ¿Por qué asignar `$(''# footer'')` a `el`?
meta html (1)
Esta pregunta ya tiene una respuesta aquí:
Encontré las siguientes declaraciones:
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 el método de representación de nuestro ejemplo de TodoView, vemos
this.$el
usa para establecer el HTML del elemento y
this.$()
usa para encontrar subelementos de la clase ''editar''.
Pero, alguien dijo que
si llamas
$(this.el)
, sigues 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
el
view
this.else puede resolver desde una cadena de selector DOM o un elemento; de lo contrario, se creará a partir de las propiedadestagName,className,idyattributesde la vista. Si no se establece ninguno,this.eles undivvací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);
Tampoco
configure
$el
directamente,
use el
método
view.setElement
.
La opción el
También se puede pasar una referencia el al 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.
Puede ver que Backbone se asegura de que
el
sea un elemento DOM y
$el
sea un objeto jQuery 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 mantiene una referencia a lo que sea
$
.
Para los propósitos de Backbone, jQuery, Zepto, Ender o My Library (broma) posee la variable
$.
En nuestro caso,
$
es jQuery, entonces
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 DOM con Backbone.View , incluya jQuery (> = 1.11.0) y json2.js para el json2.js anterior de Internet Explorer. (Los imitadores de las API Underscore y jQuery, como Lodash y Zepto , también tenderán a funcionar, con diferentes 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 solo:
$: 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.
Puede (y debe) 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'');
}
Prefijar la variable de objeto en caché jQuery con
$
es solo un estándar, no un requisito.
El código fuente de Backbone tiene menos de 2000 líneas, está bien documentado y es fácil de leer. Recomiendo encarecidamente a todos que se sumerjan 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.