Я хотел бы комментарии о подходе, чтобы обернуть виджеты в jQuery - PullRequest
Новая
       16

Я хотел бы комментарии о подходе, чтобы обернуть виджеты в jQuery

3 голосов
/ 14 января 2011

При использовании виджетов jQueryUi (диалоговое окно, средство выбора даты и т. Д.) Я всегда задаюсь вопросом, не лучше ли обернуть виджеты в какой-нибудь класс-оболочку.Вот один из способов сделать это, но я не уверен, что это хорошая практика.

Пожалуйста, прокомментируйте

CODE

Небольшой плагин для $, который заключает в себе диалог. 

//Widget Wrapper plugin POC.
//Should be extended to support all Methods on all Widgets in jQueryUI   
(function ($) {
    $.fn.ww = function (uiWidgetName, options) {
    if (this.length == 1) {
        return new wrappers[uiWidgetName](this[0], options);
    }
}


var wrappers= {};

wrappers.dialog = function (element, options) {
    var theWidget = $(element);
    theWidget.dialog(options);

    this.open = function () {
        theWidget.dialog('open');
    }
    this.close = function () {
        theWidget.dialog('close');
    }
  }

} (jQuery))

Это можно использовать следующим образом 

var a = $("#WrapperTest").ww('dialog',{ autoOpen: false });            
a.open();

1 Ответ

1 голос
/ 12 октября 2011

Ну, собственно, функции, добавленные в пространство имен $.fn пользовательским интерфейсом jQuery ($.fn.dialog() в вашем случае), уже обертывают вокруг методов каждого виджета.

Похоже, вы хотите реализовать какую-то "обратную оболочку" вокруг существующей оболочки dialog(), чтобы иметь возможность прямого доступа к методам виджета. Добавлять еще один уровень накладных расходов не нужно, поскольку вам нужно только вызвать конструктор виджета напрямую, указав параметры виджета и целевой элемент: 

var dialogWidget = new $.ui.dialog({
    autoOpen: false
}, $("#WrapperTest")[0]);

Тогда вы можете делать такие вещи, как: 

dialogWidget.open();
dialogWidget.close();
dialogWidget.option("autoOpen", !dialogWidget.option("autoOpen"));
// and so on.

Если вы создали диалог «обычным» способом (через $.fn.dialog()) и хотите получить ссылку на его экземпляр виджета дальше по линии, вы можете извлечь его из данных * 1016 элемента * используя имя виджета в качестве ключа: 

$("#WrapperTest").dialog({
    autoOpen: false
});

var dialogWidget = $("#WrapperTest").data("dialog");
dialogWidget.open();

Вы можете проверить приведенный выше код в этой скрипке .

Обновление: Начиная с jQuery UI 1.9 и выше, data() становится полностью квалифицированным именем виджета с точками, замененными тире . Таким образом, приведенный выше код становится: 

var dialogWidget = $("#WrapperTest").data("ui-dialog");
dialogWidget.open();

Использование неквалифицированного имени все еще поддерживается в 1.9, но устарело, а поддержка будет прекращена в 1.10.

...