Как использовать propHooks ненавязчивым способом?

Question

Я пытаюсь исправить маленький плагин jQuery , который превращает HTML-флажок в графический.Проблема, с которой я сталкиваюсь, заключается в том, что если я изменяю свойство «флажок» в флажке, событие change не запускается, и, следовательно, графическое представление не обновляется.

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

Осматривая, я нашел этот ответ , который указал мне на propHooks, который я могу использовать, чтобы получать уведомления при установке свойства.Итак, я могу написать это:

jQuery.propHooks.checked = {
    set: function (el, value) {
        el.checked = value;
        $(el).trigger('change');
    }
};

И теперь событие изменения запускается всякий раз, когда устанавливается свойство.

Меня беспокоит, что это не очень локализовано.Теперь я изменил поведение jQuery для всего на странице, просто ради этого небольшого плагина.Более того, я не уверен, что произойдет, если два плагина на странице будут использовать одну и ту же технику.Будет ли событие инициировано дважды, или второй хук перезапишет первый?Любое поведение кажется проблематичным.

Мне трудно найти документацию для propHooks.Как правильно его использовать?

Answer 1

Я работаю над подобным плагином и тоже столкнулся с этой проблемой.

Большая часть уже существующего кода, с которым я работаю, ожидает, что события изменения будут происходить от взаимодействия с пользователем только , поэтому запуск события "изменение", когда флажок программно check / unchecked вызывает другие события, которые не должны запускаться (эти другие обработчики должны запускаться только тогда, когда user меняет значение).

Решение, на котором я остановился, состояло в том, чтобы привязать мой icon-update-handler и к событию «change», и к пользовательскому событию, которое я назвал «updateicon». Затем в propHooks.checked.set () я запускаю это событие «updateicon» только в том случае, если элемент, который был отмечен / снят, имеет класс, который мой плагин использует для поиска и привязки этих «значимых» элементов ввода / флажка.

jQuery.propHooks.checked = {
    set: function (el, value) {
        el.checked = value;
        var jqEl = $(el);
        if(jqEl.is(".iconified")) jqEl.trigger('updateicon');
    }
};

Answer 2

SIGH.

Я надеялся, что кто-то сможет пролить свет на рассуждения о том, как работает propHooks. Во всяком случае, вот что я сделал, чтобы ограничить действие propHooks для плагина.

Я добавил следующий код в сам плагин:

var $elements = $();

$.fn.ezmark = function(options) {
    ...
    return this.each(function() {
        ... // plugin code

        // Make a list of all elements that the plugin was applied to
        $elements = $elements.add(this);
    });
}

А затем в коде propHooks я проверил, находится ли рассматриваемый элемент в списке, например:

$.propHooks.checked = {
    set: function (el, value) {
        if ($elements.filter(el).length !== 0) {
            el.checked = value;
            $(el).trigger('change');
        }
    }
};

Это далеко не идеально. Возможно, я мог бы сделать его еще менее навязчивым, не вызывая событие, а просто вызывая обработчик плагина для изменения состояния.

Answer 3

Этот код не влияет на стандартное поведение встроенного флажка.

 jQuery.propHooks.checked = {
   get: function (el) {
     if $(el).is(':checkbox') {
       return null;                // should not return undefined, return null.
     }
     // do something
   },
   set: function (el, value) {
     if $(el).is(':checkbox') {
       return undefined;           // should not return null, return undefined.
     }
     // do something
   }
 };

Связанный код: https://github.com/jquery/jquery/blob/master/src/attributes.js#L400-L409