Подтасовка шаблонов: новый способ расширения веб-приложений
April 22, 2012 in JavaScriptНа днях мне захотелось всунуть в задачи Pivotal Tracker’а кнопочку, которая перекидывала бы задачи в OmniFocus. Кнопочку я таки всунул, а теперь расскажу, как.
Налицо классически сложная ситуация: нужно подменять контент в блоках, которые создаются динамически. Я знаю два подхода к этой задаче. Первый – грубый – заключается в периодической, раз эдак 10 в секуду, проверке на появление новых блоков, и внедрению кнопки туда, где её ещё нет. Второй подход – если блок создается по нажатию ссылки – это повесить дополнительный обработчик на клик этой ссылки. Этот подход не работал, а грубый использовать не хотелось.
И тут, исследуя код Pivotal Tracker’а (распакованный, кстати, этим замечательным Javascript Beautifier’ом), я заметил, что для генерации блоков используются Javascript-шаблоны. Ага!
Соль подхода
Раз уж блоки создаются по шаблону, то достаточно этот шаблон дополнить или заменить. Лучше, конечно, дополнить, поскольку так меньше шансов, что расширение сломается в будущем.
В лучшем случае, шаблоны хранятся в теле страницы – с Pivotal Tracker’ом оказалось именно так.
В худшем случае, шаблоны загружаются в виде скрипта. Однако даже при этом их можно переопределить, поскольку обычно каждый шаблон представляет собой Javascript-функцию или даже переменную.
Итак: обнаруживаем шаблон, вставляем в него наш код, после чего перезагружаем шаблонизатор.
Получилось кратко и, не побоюсь этого слова, элегантно.
Понравился пост? Купи мне кофе