web-dev-qa-db-ja.com

ウィジェットの外部からウィジェットインスタンスにアクセスする

これはシンプルなウィジェットのモックです：

(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));

要素を非表示にするために呼び出すことができるメソッドhideを追加するだけです。ウィジェット内から行うと簡単

this.hide();

しかし、一般的なシナリオは、ウィジェットインスタンスのメソッドを外部から呼び出したい場合です（Ajax更新、またはその他の外部イベント）。

では、ウィジェットインスタンスにアクセスする最良の方法は何でしょうか。 1つの方法は、ウィジェットへの参照を要素に追加することです。醜い...

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

その後、外部からアクセスできます

this.dummy = $("#dummy").myDummyWidget();
this.dummy[0].widget.hide();
jqueryjquery-widgets
24
Anders

ウィジェットエンジンはすでに必要な処理を行っています。内部的に data（） を呼び出して、ウィジェットとそれぞれの要素を関連付けます。

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

Update：jQuery UI 1.9以降、 キーはウィジェットの完全修飾名になります、ドットの代わりにダッシュを使用 。したがって、上記のコードは次のようになります。

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

非修飾名の使用は引き続き1.9でサポートされていますが、非推奨であり、サポートは1.10で廃止されます。

42
Frédéric Hamidi

ウィジェットの定義時に作成されるメソッドもあり、instanceメソッドを呼び出すだけで、次のように実際のウィジェットインスタンスを取得できます。

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

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

または、ワンライナーとしてそれを行うことができます：

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

どのバージョンで導入されたかはわかりませんが、ウィジェットのメソッドを呼び出すだけの場合は、次のように使用できます。

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

ここでmyWidgetは、ウィジェットのインスタンスを保持するDOM要素のIDです。 hideメソッドを呼び出します。

呼び出す必要のあるメソッドにパラメータが必要な場合は、次のように、メソッド名の後にそれらを渡すことができます。

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

また、特別なセレクター：widgetNameを使用してウィジェットのすべてのインスタンスを検索し、それらのメソッドを呼び出すことができます。次のコードスニペットは、すべてのmyDummyWidgetウィジェットでhideメソッドを呼び出します。

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

ウィジェットのフルネームは、スコア（ "-"）で区切られたプレフィックス（例では "ui"）とウィジェットの名前（ "myDummyWidget"）で構成されていることに注意してください。

カスタムウィジェットには独自のプレフィックスを使用する必要があります。 「ui」は通常、jQueryUIのビルド済みウィジェット用に予約されています。

お役に立てば幸いです。 :)

1
Pittigghio

JQueryカスタムセレクターを使用してウィジェット要素を検索してから、それらのデータを呼び出して実際のウィジェットインスタンスを取得することもできます。

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

このコードは、作成されて別のウィジェットホルダーにアタッチされているui.myDummyWidgetのすべてのインスタンス（ピリオド。がハイフン-に変更されていることに注意）を検出します。

1
Danack