jQuery Plugin: Obtenez le « cet » objet dans d'autres fonctions

Question

Je suis en train de caisse un curseur panorama comme un plugin jQuery, et j'ai le code suivant ..

$.fn.panorama = function(settings) { 

    var myPanorama = this; 
    .. 

    this.mousedown(function(e){ 

     //do stuff 
     $(this).css... //this all work 
    } 


    //Call mouseup on document in case user lets go of mouse outside draggable object 
$(document).mouseup(function(){ 
    $(myPanorama).easeDragging(); //works but probably not the way to do it 
     this.easeDragging(); //ideal but refers to wrong object 
}); 

    } 

Ma question est de savoir comment puis-je parle à l'objet "this" dans l'appel $ (document) .mouseup?

Comme il pense que "ceci" est le document lui-même et non l'objet attaché au plugin. Pour l'instant, je fais juste une variable et ça marche mais il doit y avoir un meilleur moyen!

merci!

Answer 1

En fait, la façon dont vous atteint, il est la façon la plus simple de le faire - le stockage d'une référence à ce:

var myPanorama = this; 

// ... 

    myPanorama.easeDragging(); 

Vous pouvez également utiliser jQuery.proxy() pour définir le contexte de la fonction (merci @ Nick):

$(document).mouseup($.proxy(function(){ 
    this.easeDragging(); 
}, this)); 

l'autre façon de le faire est d'utiliser la 5ème édition ECMAScript .bind() métho d, bien que vous devez ajouter ceci au prototype de fonction pour que cela fonctionne dans les navigateurs non pris en charge:

// From Prototype.js 
if (!Function.prototype.bind) { // check if native implementation available 
    Function.prototype.bind = function(){ 
    var fn = this, args = Array.prototype.slice.call(arguments), 
     object = args.shift(); 
    return function(){ 
     return fn.apply(object, 
     args.concat(Array.prototype.slice.call(arguments))); 
    }; 
    }; 
} 

Ensuite, vous pouvez l'utiliser dans votre code comme ceci:

$(document).mouseup((function(){ 
    this.easeDragging(); 
}).bind(this)); 

Answer 2

Qu'est-ce que vous faites est très bien (et entièrement correct).

Une astuce d'optimisation bien, il n'y a pas besoin de l'envelopper de nouveau car il est déjà un objet jQuery, vous pouvez simplement faire ceci:

myPanorama.easeDragging(); 

Answer 3

Ne pourriez-vous lier au document en premier lieu (à l'intérieur le plugin) et ensuite travailler si l'événement vous est utile (se passe sur votre élément, ou un enfant de votre élément).

Vous devez utiliser un espace de noms si vous liez le document, par exemple.

$(document).bind('mouseup.panorama', function() { 
    ... 
}