Использование jQuery внутри виджета

Виджет спроектирован так, чтобы не конфликтовать с уже используемыми на странице библиотеками и скриптами. Например, все библиотеки, включая jQuery, загружаются в режиме «no conflict». Это накладывает некоторые ограничения на работу с библиотеками при модификации виджета.

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

Для работы с jQuery внутри виджета есть такие инструменты:

  • T$ — jQuery, который использует TWF. Работает в безконфликтном режиме;
  • $$() — то же, что $().find() от корня текущего RenderTarget — именно им рекомендуется искать элементы в виджете;
  • $currentDocumentNode — $(document) текущего RenderTarget;
  • currentWindowNode — window текущего RenderTarget.

То есть, чтобы найти элемент внутри виджета вместо $('.element_class') нужно использовать this.$$('.element_class'). Если же нужно вызвать метод основного объекта jQuery, например, jQuery.proxy(), нужно написать this.T$.proxy().

Например, чтобы помощью jQuery перекрасить блок с описанием регистрации в красный цвет, нужно написать примерно такой код:

<script type="text/javascript">
    var handleTWFpostRepaint = function(params) {
        this.$$('.b-reg-descr').css('color', 'red');
    }
</script>

<script defer="defer" data-timepad-widget-v2="event_register" data-timepad-customized="АЙДИ_ВАШЕЙ_КАСТОМИЗАЦИИ" data-twf2s-event--id="АЙДИ_ВАШЕГО_СОБЫТИЯ" src="//timepad.ru/js/tpwf/loader/min/loader.js">
    (function(){return {
        "bindEvents": {
            "postRepaint": "handleTWFpostRepaint"
        }
    };})();
</script>

Разберем этот код подробнее:

  1. В виджете конструкция "bindEvents": { "postRepaint": "handleTWFpostRepaint"} говорит, что при каждой перерисовке виджета нужно исполность код, записанный в переменную handleTWFpostRepaint.
  2. Соответственно, при каждой перерисовке, вызывается функция handleTWFpostRepaint (ее можно написать где угодно, главное чтобы она была загружена до начала инициализации виджета) и при этом ей передается в параметрах инстанс виджета, который ее вызвал.
  3. Так как по сути функция запускается внутри виджета, ее this будет указывать на виджет. Это значит, что все методы и переменные, которые использует сам виджет, доступны и ей (включая собственный экземпляр jQuery). Но это накладывает одно ограничение - все эти методы (включая jQuery) нужно вызывать через этот самый this. Дальше мы просто вызываем non-conflict инстанс jQuery через this.$$() и делаем все как обычно - в данном случае, меняем блоку .b-reg-descr цвет текста на красный.