jQuery Plugin: Get „to” obiekt wewnątrz innych funkcji

Question

Próbuję skrzyni suwak panoramicznego jako plugin jQuery, i mam następujący kod ..

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

    } 

Moje pytanie brzmi jak mogę odwołać się do "tego" obiektu wewnątrz wywołania $ (document) .mouseup?

Ponieważ uważa, że ​​"ten" jest sam dokument, a nie obiekt dołączony do wtyczki.

Na razie właśnie robię zmienną i działa, ale musi być lepszy sposób!

dziękuję!

Answer 1

Właściwie sposób można osiągnąć to jest najprostszym sposobem, aby to zrobić - przechowywanie odniesienie do to:

var myPanorama = this; 

// ... 

    myPanorama.easeDragging(); 

Alternatywnie, można użyć jQuery.proxy() ustawić kontekst funkcji (Dzięki @Nick):

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

Innym sposobem na to jest użycie ECMAScript 5. edycja .bind() meto d, chociaż trzeba dodać to do prototypu funkcji na to, aby pracować w nieobsługiwanych przeglądarek:

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

Wtedy można go używać w kodzie tak:

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

Answer 2

Co robisz jest w porządku (i całkowicie poprawne).

Jedna wskazówka optymalizacji choć, nie ma potrzeby, aby owinąć go ponownie, ponieważ jest to już obiekt jQuery, można po prostu to zrobić:

myPanorama.easeDragging(); 

Answer 3

Nie można powiązać z dokumentem na pierwszym miejscu (wewnątrz wtyczkę), a następnie sprawdź, czy wydarzenie jest dla ciebie użyteczne (dzieje się na twoim elemencie lub dziecku twojego żywiołu).

Należy używać przestrzeni nazw, jeśli wiążą się z dokumentem, np.

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