30

JQuery ウィジェット (以下のコード例) を作成し、「パブリック」メソッドを定義する場合、次のフォームを使用する以外にメソッドを呼び出す方法はありますか? 

$("#list").list("publicMethod");

すべてが同じメソッドを定義する (基本的には同じインターフェイスを実装する) 一連のウィジェットを作成し、現在どのウィジェットでメソッドを呼び出しているかを知らなくてもメソッドを呼び出せるようにしたいと考えています。現在のフォームでは、「リスト」ウィジェットでメソッドを実行していることを知る必要があります。

以下は、「public」メソッドでウィジェットを作成する例です。

 (function($) {
    var items = [];
    var itemFocusIdx = 0;

    $.widget("ui.list", {
        // Standard stuff
        options : { ... },
        _create : function() { ... },
        destroy : function() { ... },

        // My Public Methods
        publicMethod : function() { ... }
        ...
    });
}(jQuery));
4

6 に答える 6

23

jQuery UI ウィジェットは、jQuery の $.data(...) メソッドを使用して、間接的にウィジェット クラスを DOM 要素に関連付けます。ウィジェットでメソッドを呼び出す好ましい方法は、まさに Max によって説明されたものです...

$('#list').list('publicMethod');

...しかし、戻り値をフィールドにしたい場合は、 data メソッドを介してこのように呼び出す方がうまくいくでしょう:

$('#list').data('list').publicMethod();

ただし、2 番目の方法を使用すると、jQuery UI ウィジェットのパターン全体が回避されるため、可能であれば回避する必要があります。

于 2010-07-14T21:16:49.553 に答える
2

少し話題から外れていることはわかっていますが、 jquery Entwineを見たいと思うかもしれません。

これにより、単純なコードで巧妙な動作を可能にする継承とポリモーフィズムの形式が提供されます。これはあなたがやろうとしていることをするように思えます。

于 2010-07-15T03:05:56.533 に答える
1

list、list2、および...があるとsuperListしましょう。それぞれに対して「publicMethod」を呼び出しましょう。

$.fn.callWidgetMethod = function(method) {
  var $this = this,
      args = Array.prototype.slice.call(arguments, 1);

  // loop though the data and check each piece of data to
  // see if it has the method
  $.each(this.data(), function(key, val) {
    if ($.isFunction(val[method])) {
      $this[key].apply($this, args);

      // break out of the loop
      return false;
    }
  });
}

$("#some-element").list();
$("#another-element").list2();
$("#hydrogen").superList();

$("#some-element").callWidgetMethod("publicMethod");
$("#another-element").callWidgetMethod("publicMethod");
$("#hydrogen").callWidgetMethod("publicMethod");
于 2011-05-20T21:21:34.793 に答える
0

このソリューションは @Jiaaro のソリューションにインスパイアされたものですが、戻り値が必要で、jQuery を拡張するのではなく JavaScript 関数として実装しました。

var invokeWidgetMethod = function(methodName, widgetElem)
    {
        var $widgetElem = $(widgetElem),
            widgetData = $widgetElem.data(),
            dataName,
            dataObject;

        for(dataName in widgetData)
        {
            dataObject = widgetData[dataName];
            if ($.isFunction(dataObject[methodName])) {
                return dataObject[methodName]();
            }
        }
    }
于 2011-10-09T00:15:17.497 に答える
0

これを試して：

$("#list").list("publicMethod");
于 2010-07-14T03:57:19.810 に答える
-2

これはどう：

$("#list").list.publicMethod

key:value ペア セットで ui.list を拡張しているため

于 2010-06-03T14:36:43.443 に答える