Quelle est la différence entre $el et el dans les vues Backbone.js ?

Question

Pouvez-vous s'il vous plaît dire la différence entre $el y el dans les vues Backbone.js ?

Answer 1

Disons que vous faites ceci

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,

avec ceci

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.

l'un est l'élément html et l'autre est l'objet jQuery de l'élément.

Answer 2

mu est trop court c'est exactement ça :

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

Et il est facile de comprendre pourquoi, regardez les de la vue _setElement fonction :

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

Cela permet de garantir que le el est toujours un élément DOM, et que la propriété $el est toujours un objet jQuery qui l'enveloppe. Ainsi, ce qui suit est valable même si j'ai utilisé un objet jQuery comme propriété el option ou propriété :

// Passing a jQuery object as the `el` option.
var myView = new Backbone.View({ el: $('.selector') });
// Using a jQuery object as the `el` View class property
var MyView = Backbone.View.extend({
    el:  $('.selector')
});

Qu'est-ce qu'un objet jQuery en cache ?

C'est un objet jQuery assigné à une variable pour être réutilisé. Cela évite l'opération coûteuse de trouver l'élément à travers le DOM avec quelque chose comme $(selector) à chaque fois.

Voici un exemple :

render: function() {
    this.$el.html(this.template(/* ...snip... */));
    // this is caching a jQuery object
    this.$myCachedObject = this.$('.selector');
},

onExampleEvent: function(e) {
    // Then it avoids $('.selector') here and on any sub-sequent "example" events.
    this.$myCachedObject.toggleClass('example');
}

Voir un réponse détaillée J'ai écrit pour en savoir plus.

Answer 3

En bref, el vous donne accès aux éléments HTML DOM, c'est-à-dire que vous pouvez les référencer et y accéder, tandis que $el est un wrapper jQuery autour de el.

$el ne permet pas seulement d'accéder à un élément particulier du DOM, mais il agit également comme un sélecteur jQuery et vous avez le privilège d'utiliser les fonctions de la bibliothèque jQuery comme show(), hide(), etc. sur l'élément particulier du DOM.

Answer 4

Il est si tard pour répondre mais this.$el es un référence à l'élément dans le contexte de jQuery, typiquement pour une utilisation avec des choses comme .html() o .addClass() etc. Par exemple, si vous avez un div avec l'id someDiv, et que vous lui attribuez la valeur el de la vue Backbone, les déclarations suivantes sont identiques :

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

this.el est l'élément DOM natif, non modifié par jQuery.