Contrôle de la valeur de "this" dans un événement jQuery

Question

J'ai créé un "contrôle" à l'aide de jQuery et j'ai utilisé jQuery.extend pour le rendre aussi OO que possible.

Au cours de l'initialisation de mon contrôle, je connecte divers événements de clic comme suit

jQuery('#available input', 
            this.controlDiv).bind('click', this, this.availableCategoryClick);

Remarquez que je place 'this' comme argument de données dans la méthode bind. Cela me permet d'accéder aux données attachées à l'instance du contrôle plutôt qu'à l'élément qui déclenche l'événement de clic.

Cela fonctionne parfaitement, mais je pense qu'il y a une meilleure solution.

Ayant utilisé Prototype dans le passé, je me souviens d'une syntaxe bind qui vous permettait de contrôler la valeur de "this" dans l'événement.

Qu'est-ce que la méthode jQuery ?

Answer 1

Vous pouvez utiliser jQuery.proxy() avec la fonction anonyme, juste un peu gênant que 'context' soit le deuxième paramètre.

 $("#button").click($.proxy(function () {
     //use original 'this'
 },this));

Answer 2

J'aime votre façon de faire, en fait j'utilise une construction similaire :

$('#available_input').bind('click', {self:this}, this.onClick);

et la première ligne de this.onClick :

var self = event.data.self;

J'aime cette façon de faire parce que vous obtenez à la fois l'élément cliqué (en tant que this) et l'objet "this" en tant que self sans avoir à utiliser les fermetures.

Answer 3

JQuery a le jQuery.proxy (disponible depuis la version 1.4).

Exemple :

var Foo = {
  name: "foo",

  test: function() {
    alert(this.name)
  }
}

$("#test").click($.proxy(Foo.test, Foo))
// "foo" alerted

Answer 4

Je ne pense pas que jQuery ait une fonction intégrée pour cela. Mais vous pouvez utiliser une construction auxiliaire comme la suivante :

Function.prototype.createDelegate = function(scope) {
    var fn = this;
    return function() {
        // Forward to the original function using 'scope' as 'this'.
        return fn.apply(scope, arguments);
    }
}

// Then:
$(...).bind(..., obj.method.createDelegate(obj));

De cette façon, vous pouvez créer des "fonctions enveloppes" dynamiques avec createDelegate() qui appellent la méthode avec un objet donné comme portée "this".

Exemple :

function foo() {
    alert(this);
}

var myfoo = foo.createDelegate("foobar");
myfoo(); // calls foo() with this = "foobar"

Answer 5

JQuery ne prend pas en charge les liaisons et la méthode préférée consiste à utiliser des fonctions.

Parce qu'en Javascript, this.availableCategoryClick ne signifie pas l'appel de la fonction availableCategoryClick sur cet objet, jQuery conseille d'utiliser cette syntaxe préférée :

var self = this;
jQuery('#available input', self.controlDiv).bind('click', function(event)
{
   self.availableCategoryClick(event);
});

Les concepts OO en Javascript sont difficiles à comprendre, la programmation fonctionnelle est souvent plus facile et plus lisible.