jQuery Plugin: Lấy "này" đối tượng bên trong các chức năng khác

Question

Tôi cố gắng để thùng một thanh trượt panorama như một plugin jQuery, và tôi có đoạn mã sau ..

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

    } 

Câu hỏi của tôi là làm thế nào để tham khảo cho đối tượng "this" bên trong $ (document) .mouseup call?

Vì nó cho rằng "đây" chính là tài liệu chứ không phải đối tượng được đính kèm với plugin.

Hiện tại tôi chỉ đang tạo biến và hoạt động nhưng phải có cách tốt hơn!

cảm ơn!

Answer 1

Trên thực tế, cách bạn đạt được nó là cách đơn giản nhất để làm điều đó - lưu trữ một tham chiếu đến này:

var myPanorama = this; 

// ... 

    myPanorama.easeDragging(); 

Ngoài ra, bạn có thể sử dụng jQuery.proxy() để thiết lập bối cảnh của hàm (nhờ @Nick):

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

Một cách khác để làm điều đó là sử dụng ECMAScript 5th edition .bind() metho d, mặc dù bạn cần phải thêm video này vào nguyên mẫu hàm cho nó để làm việc trong các trình duyệt được hỗ trợ:

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

Sau đó, bạn có thể sử dụng nó trong mã của bạn như sau:

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

Answer 2

gì bạn đang làm chỉ là tốt (và hoàn toàn chính xác).

Một tối ưu hóa tip mặc dù, không có cần phải quấn nó một lần nữa vì nó đã là một đối tượng jQuery, bạn có thể chỉ làm điều này:

myPanorama.easeDragging(); 

Answer 3

thể không liên kết với tài liệu ở nơi đầu tiên (bên trong các plugin) và sau đó làm việc ra nếu sự kiện này là hữu ích cho bạn (xảy ra trên phần tử của bạn, hoặc một đứa trẻ của phần tử của bạn).

Bạn nên sử dụng không gian tên nếu bạn đang ràng buộc với tài liệu, ví dụ:

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