jQuery Plugin: Holen Sie sich das „dieses“ Objekt in anderen Funktionen

Question

Ich versuche, einen Panorama-Regler als jQuery-Plugin, um Kiste, und ich habe den folgenden Code ..

$.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 
}); 

    } 

Meine Frage ist, wie kann ich verweisen an das Objekt "this" innerhalb des Aufrufs $ (document) .mouseup?

Da es "dieses" denkt, ist das Dokument selbst und nicht das Objekt, das dem Plugin beigefügt ist.

Für jetzt mache ich nur eine Variable und es funktioniert, aber es muss einen besseren Weg geben!

danke!

Answer 1

Eigentlich ist die Art und Weise erreicht man es ist der einfachste Weg, es zu tun - einen Verweis auf diese Speicherung:

var myPanorama = this; 

// ... 

    myPanorama.easeDragging(); 

Alternativ können Sie jQuery.proxy() verwenden den Kontext der Funktion zu setzen (dank @ Nick):

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

Der andere Weg, es zu tun ist, die ECMAScript 5th Edition .bind() metho zu verwenden d, obwohl müssen Sie dies der Prototyp der Funktion hinzuzufügen, um es in nicht unterstützten Browsern funktionieren:

// 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))); 
    }; 
    }; 
} 

Dann können Sie es wie so in Ihrem Code verwenden:

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

Answer 2

Was Sie tun ist in Ordnung (und völlig richtig).

Eine Optimierung Spitze aber es gibt keine Notwendigkeit, es wieder zu wickeln, da es bereits ein Objekt jQuery ist, können Sie dies nur tun:

myPanorama.easeDragging(); 

Answer 3

Könnten Sie nicht auf das Dokument an erster Stelle binden (innen das Plugin) und dann herausfinden, ob das Ereignis für Sie nützlich ist (geschieht auf Ihrem Element oder einem Kind Ihres Elements).

Sie sollten einen Namespace verwenden, wenn Sie an das Dokument gebunden sind, z.

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