Cách xử lý sự kiện trong các tiện ích UI của jQuery

Question

Tôi đang cố gắng viết một tiện ích jQuery theo mẫu được cung cấp here. Đây là một bản chụp của các widget:

(function ($) { 
    $.widget("ui.notification", { 
     _create: function() { 
      if (!this.element.hasClass("ntfn")) { 
       this.element.addClass("ntfn"); 
      } 

      this.elTitle = this.element.append("<div class='ntfn-title'>Notifications</div>"); 

      this.elTitle.click(this._titleClick) 
     }, 
     _titleClick: function() { 
      console.log(this); 
     } 
    }); 
})(jQuery); 

Ở đây vấn đề là với phạm vi "này" bên trong phương pháp _titleClick, bên trong phương pháp này chỉ ra các yếu tố title. Nhưng tôi cần nó để trỏ đến phần tử widget.

Tôi nghĩ rằng một trong những cách để làm việc đó sẽ được sử dụng một lớp wrapper như

var that = this; 
this.elTitle.click(function() { 
    that._titleClick.apply(that, arguments); 
}); 

Đây có phải là cách tốt nhất để giải quyết vấn đề này hoặc có bất kỳ mô hình chung để giải quyết vấn đề này?

Answer 1

Tôi đã viết một phương pháp riêng của mình để giải quyết vấn đề này

_wrapCallback : function(callback) { 
    var scope = this; 
    return function(eventObject) { 
     callback.call(scope, this, eventObject); 
    }; 
} 

Answer 2

Bạn nên tìm đến jQuery.proxy() http://api.jquery.com/jQuery.proxy/

el.bind('evenname', $.proxy(function() { 
    this.isMyScope.doSomething(); 
}, scope)); 

Answer 3

Trong bạn tạo, init (hoặc ở đâu đó trong trường hợp của bạn) chức năng thực hiện việc này:

 _create: function() { 

     ... 

     // Add events, you will notice a call to $.proxy in here. Without this, when using the 'this' 
     // property in the callback we will get the object clicked, e.g the tag holding the buttons image 
     // rather than this widgets class instance, the $.proxy call says, use this objects context for the the 'this' 
     // pointer in the event. Makes it super easy to call methods on this widget after the call. 
     $('#some_tag_reference').click($.proxy(this._myevent, this)); 

     ... 

     }, 

Bây giờ xác định trình xử lý sự kiện đối tượng của bạn như sau:

 _myevent: function(event) { 

      // use the this ptr to access the instance of your widget 
      this.options.whatever; 
     }, 

Answer 4

Sử dụng this._on() method để ràng buộc trình xử lý. Phương thức này được cung cấp bởi nhà máy tiện ích jQuery UI và sẽ đảm bảo rằng bên trong hàm xử lý, this luôn đề cập đến cá thể widget.

_create: function() { 
    ... 
    this._on(this.elTitle, { 
     click: "_titleClick" // Note: function name must be passed as a string! 
    }); 
}, 
_titleClick: function (event) { 
    console.log(this);  // 'this' is now the widget instance. 
}, 

Answer 5

xác định var phạm vi = này, và sử dụng phạm vi trong xử lý sự kiện.

_create: function() {   
     var scope = this; 
     $(".btn-toggle", this.element).click(function() { 
      var panel = $(this).closest(".panel"); 
      $(this).toggleClass("collapsed"); 
      var collapsed = $(this).is(".collapsed"); 
      scope.showBrief(collapsed); 
     }); 
    }, 

Answer 6

Một cách khác để làm điều tương tự mà không sử dụng đóng cửa, là phải vượt qua các widget như một phần của dữ liệu sự kiện như vậy:

// using click in jQuery version 1.4.3+. 
var eventData = { 'widget': this }; 

// this will attach a data object to the event, 
// which is passed as the first param to the callback. 
this.elTitle.click(eventData, this._titleClick); 

// Then in your click function, you can retrieve it like so: 
_titleClick: function (evt) { 
    // This will still equal the element. 
    console.log(this); 
    // But this will be the widget instance. 
    console.log(evt.data.widget); 
}; 

Answer 7

Nó từng là qua jquery bind phương pháp hiện nay on được ưu tiên.

Kể từ jQuery 1.7, phương thức .on() là phương pháp ưu tiên cho gắn trình xử lý sự kiện vào tài liệu. Đối với các phiên bản trước, phương thức .bind() được sử dụng để đính kèm trình xử lý sự kiện trực tiếp vào các phần tử . Trình xử lý được gắn với các phần tử hiện được chọn trong đối tượng jQuery là , vì vậy các phần tử đó phải tồn tại tại thời điểm cuộc gọi tới .bind() xảy ra. Để có sự kiện ràng buộc linh hoạt hơn, hãy xem cuộc thảo luận của sự kiện ủy quyền trong .on() hoặc .delegate().

_create: function() { 
    var that = this; 
    ... 
    elTitle.on("click", function (event) { 
      event.widget = that; // dynamically assign a ref (not necessary) 
      that._titleClick(event); 
    }); 
}, 
_titleClick: function (event) { 
    console.log(this);    // 'this' now refers to the widget instance. 
    console.log(event.widget);  // so does event.widget (not necessary) 
    console.log(event.target);  // the original element `elTitle` 
},