Общие методы JQuery - Widget

Если я создаю виджет JQuery (пример кода ниже) и затем определяю "общедоступный" метод, есть ли другой способ вызова метода, кроме использования следующей формы?

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

Я хотел бы создать серию виджетов, которые определяют одни и те же методы (в основном, реализуют один и тот же интерфейс) и смогут вызвать метод, не зная ничего о том, какой виджет в данный момент я вызываю метод. В текущей форме мне нужно знать, что я выполняю метод в виджетах "Список".

Ниже приведен пример создания виджета с помощью "общедоступного" метода.

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

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

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

Ответ 1

jQuery Виджеты пользовательского интерфейса используют метод jQuery $.data(...) для косвенного ассоциирования класса виджетов с элементом DOM. Предпочтительным способом вызова метода в виджетах является то, что было описано Max...

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

... но если вы хотите вывести возвращаемое значение, вам будет лучше называть его таким образом, используя метод данных:

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

Однако, используя второй способ, выполните весь шаблон виджета JQuery UI и, вероятно, следует избегать, если это возможно.

Ответ 2

Немного не по теме, я знаю, но вы можете посмотреть на jquery Entwine.

Это обеспечивает форму наследования и полиморфизма, которая позволяет некоторое умное поведение с простым кодом. Похоже, это будет делать то, что вы пытаетесь сделать.

Ответ 3

скажем, что у вас есть 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");

Ответ 4

Попробуйте следующее:

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

Ответ 5

Это решение вдохновлено решением @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]();
            }
        }
    }

Ответ 6

Как насчет этого:

$("#list").list.publicMethod

По мере того, как вы расширяете ui.list с помощью набора ключей: значение пары