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

但是，使用第二种方式会避开整个 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

试试这个：

$("#list").list("publicMethod");
于 2010-07-14T03:57:19.810 回答
0

这个解决方案的灵感来自@Jiaaro 的解决方案，但我需要一个返回值并实现为 JavaScript 函数，而不是扩展 jQuery：

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 回答
-2

这个怎么样：

$("#list").list.publicMethod

当您使用您的键：值对集扩展 ui.list

于 2010-06-03T14:36:43.443 回答