web-dev-qa-db-fra.com

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

Pouvez-vous faire la différence entre $el et el dans les vues Backbone.js?

javascriptbackbone.jsbackbone-views
59
ali asad

disons que vous faites cela

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 ça

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.

79
Rayweb_on

mu est trop court est exactement exact:

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

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

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

Cela garantit que la propriété el est toujours un élément DOM et que la propriété $el Est toujours un objet jQuery qui l'enveloppe. Donc, ce qui suit est valide même si j'ai utilisé un objet jQuery comme option ou propriété el:

// 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 mis en cache?

Il s'agit d'un objet jQuery affecté à une variable à des fins de réutilisation. 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.

6
Emile Bergeron

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

$ el fournit non seulement l'accès à un élément DOM particulier, mais il agit en outre 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 DOM particulier.

2
Sourabh Bhavsar

Il est si tard pour y répondre mais -> this.$el Est un référence à l'élément dans le contexte de jQuery, généralement pour une utilisation avec des choses comme .html() ou .addClass(), etc. Par exemple, si vous aviez un div avec id someDiv et que vous le définissez sur la propriété el de la vue Backbone, les instructions suivantes sont identiques:

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

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

1
Samin Fakharian