javascript - template - underscore js que es

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

Question

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

Answer 1

En resumen, el te da acceso a elementos HTML DOM, es decir, puedes derivarlos y acceder a ellos, mientras que $ el es jQuery wrapper around el.

$ el no solo proporciona acceso a un elemento DOM particular, además actúa como un selector jQuery y usted tiene el privilegio de usar las funciones de la biblioteca jQuery como show (), hide (), etc. en el elemento DOM particular.

Answer 2

Es muy tarde para responderlo, pero -> this.$el es una referencia al elemento en el contexto 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.

Answer 3

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 objeto jQuery del elemento.

Answer 4

mu es demasiado corto es exactamente correcto:

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

Y es fácil entender por qué, mire la función _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 objeto jQuery de él. Por lo tanto, lo siguiente es válido aunque utilicé un objeto 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 objeto jQuery almacenado en caché?

Es un objeto 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.