Tiếp cận dụ widget từ bên ngoài phụ tùng

Question

Đây là một widget giả đơn giản:

(function ($) { 

    $.widget("ui.myDummyWidget", { 

     options: { 
     }, 

     _create: function() { 
     }, 
     hide: function() { 
      this.element.hide(); 
     }, 
     _setOption: function (key, value) { 
      $.Widget.prototype._setOption.apply(this, arguments); 
     }, 

     destroy: function() { 
      $.Widget.prototype.destroy.call(this); 
     } 

    }); 

} (jQuery)); 

Nó chỉ thêm một ẩn phương pháp mà bạn có thể gọi để ẩn phần tử. Dễ dàng nếu được thực hiện từ bên trong phụ tùng

this.hide(); 

Tuy nhiên, một kịch bản phổ biến là bạn muốn gọi các phương thức trên một trường hợp phụ tùng từ bên ngoài (Cập nhật Ajax, hoặc các sự kiện bên ngoài khác)

Vì vậy, cách tốt nhất là gì truy cập phiên bản widget? Một cách là thêm tài liệu tham khảo để các phụ tùng cho các phần tử, xấu xí ...

_create: function() { 
    this.element[0].widget = this; 
}, 

Sau đó, bạn có thể truy cập nó từ bên ngoài làm

this.dummy = $("#dummy").myDummyWidget(); 
this.dummy[0].widget.hide(); 

Answer 1

Động cơ phụ tùng đã làm những gì bạn muốn: nó gọi data() trong nội bộ để kết hợp các vật dụng và các yếu tố tương ứng của họ:

$("#dummy").myDummyWidget(); 
// Get associated widget. 
var widget = $("#dummy").data("myDummyWidget"); 
// The following is equivalent to $("#dummy").myDummyWidget("hide") 
widget.hide(); 

cập nhật: Từ jQuery UI 1.9 trở đi, the key becomes the widget's fully qualified name, with dashes instead of dots. Do đó, mã ở trên sẽ trở thành:

// Get associated widget. 
var widget = $("#dummy").data("ui-myDummyWidget"); 

Sử dụng tên không đủ tiêu chuẩn vẫn được hỗ trợ trong 1,9 nhưng không được hỗ trợ và hỗ trợ sẽ bị xóa trong 1,10.

Answer 2

Bạn cũng có thể sử dụng công cụ chọn tùy chỉnh jQuery để tìm các yếu tố tiện ích trước khi gọi dữ liệu trên chúng để có được ví dụ cụ thể thực tế ví dụ:

$(this.element).find(":ui-myDummyWidget").each(function (index, domEle) { 
    var widgetObject = $(this).data("myDummyWidget"); 
    widgetObject.hide(); 
    // this == domEle according to the jQuery docs 
}); 

Đó là mã tìm thấy tất cả các trường hợp của ui.myDummyWidget (lưu ý sự thay đổi của thời gian để gạch nối -.) Đã được tạo ra và gắn liền với một người giữ widget.

Answer 3

Tôi không chắc chắn trong đó phiên bản nó được giới thiệu nhưng, nếu tất cả các bạn muốn làm là gọi phương thức của một widget bạn có thể sử dụng này:

$("#myWidget").myDummyWidget("hide"); 

đâu myWidget là id của DOM phần tử giữ một thể hiện của tiện ích con của bạn. Điều này sẽ gọi phương thức ẩn.

Nếu phương pháp mà bạn cần phải gọi nhu cầu thông số bạn có thể vượt qua họ sau tên phương pháp, như thế này:

$("#myWidget").myDummyWidget("setSpecialAnswer",42); 

Ngoài ra, bạn có thể tìm kiếm tất cả các trường của widget của bạn bằng cách sử dụng bộ chọn đặc biệt : widgetName và các phương thức gọi trên chúng. Đoạn mã sau sẽ gọi phương thức ẩn trên tất cả các tiện ích myDummyWidget.

$(":ui-myDummyWidget").myDummyWidget("hide"); 

tâm rằng fullname phụ tùng bao gồm một tiền tố ("ui" trong ví dụ) và tên của phụ tùng ("myDummyWidget") ngăn cách bởi một số điểm ("-").

Bạn nên sử dụng tiền tố của riêng mình cho tiện ích con tùy chỉnh; "ui" thường được dành riêng cho các tiện ích con được xây dựng trước của jQueryUI.

Tôi hy vọng điều đó sẽ hữu ích. :)

Answer 4

Ngoài ra còn có một phương pháp tạo ra khi một Widget được xác định, bạn chỉ có thể gọi phương thức instance để có được những ví dụ thực tế Widget như vậy:

//Create the Instance 
$("#elementID").myDummyWidget(options); 

//Get the Widget Instance 
var widget = $("#elementID").myDummyWidget("instance"); 

Hoặc bạn có thể làm điều đó như một one- lót:

var widget = $("#elementID").myDummyWidget(options).myDummyWidget("instance");