Как создать механизм шаблонов Javascript, который не уничтожает события, прикрепленные к шаблону?

Я оценивал множество различных шаблонизаторов JS на стороне клиента (doT, parrot, dust.js, микрошаблоны, подчеркивание и т. д.). Все они работают одинаково, используя некоторые типы тегов для представления данных, а некоторые дают возможность встраивать в шаблон чистый JS, включая циклы, если/то и т. д. Однако все они работают путем преобразования самого шаблона в строку. , затем в javascript для интерполяции переменных, выполнения циклов и т. д.

Когда происходит это преобразование, все обработчики событий, которые были прикреплены к исходным объектам в шаблоне (т. е. созданные jQuery в document.ready), конечно же, теряются. Чтобы добавить эти обработчики обратно в результирующий HTML, потребуется вернуться и повторно применить любые такие обработчики событий после каждого рендеринга шаблона.

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

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

Чтобы сделать код чистым и простым в сопровождении, имеет смысл применить события Click к этим кнопкам в шаблоне HTML в document.ready(). Затем каждый раз, когда шаблон клонируется для нового элемента списка, события также клонируются.

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

Я знаю, что в jQuery есть функция clone(), которая клонирует события, и это отлично работает для базовых шаблонов, но когда вы пытаетесь включить в шаблон произвольный javascript, это становится непрактичным.

Я стараюсь избегать шаблонов, которые зависят от атрибутов элемента html для настройки циклов, решений и т. д., потому что код шаблона становится очень уродливым. Желателен чистый шаблон с простыми тегами для подстановки данных, простыми циклами JS for для повторяющихся элементов и простыми ссылками на исходные данные.

У кого-нибудь есть идеи, как это сделать?

Спасибо!


person Ryan Griggs    schedule 25.01.2015    source источник
comment
Вместо того, чтобы слишком усложнять шаблоны, стоит заняться делегированием событий, чтобы эта проблема даже не возникала…   -  person CBroe    schedule 25.01.2015
comment
Да, с делегированием событий и управлением событиями внутри вашего представления все становится проще. Проверьте, как события управляются в различных настройках mvc, использующих шаблоны (Ember/Angular и т. д.). Шаблон есть шаблон в конце концов.   -  person sabithpocker    schedule 25.01.2015
comment
@CBroe Вы совершенно правы. Спасибо, что указали мне правильное направление! Я был слишком сосредоточен на том, чтобы к каждому элементу были привязаны свои события. Делегирование событий делает все НАМНОГО проще, и jQuery поддерживает это (api.jquery.com/delegate) . Если хотите, поместите это в ответ, и я отдам вам должное, которого вы заслуживаете! Спасибо!   -  person Ryan Griggs    schedule 25.01.2015
comment
@sabithpocker Вы правы - делегирование событий - это ответ. Спасибо!   -  person Ryan Griggs    schedule 25.01.2015
comment
@RyanGriggs Вы также можете проверить, насколько тщательно обработчики событий управляются в масштабируемых библиотеках. Неосторожные неуправляемые обработчики могут привести к нежелательной потере памяти в большом SPA.   -  person sabithpocker    schedule 25.01.2015


Ответы (1)


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


И да, jQuery был .delegate — он устарел и был заменен на .on, который может делать то же самое, см. http://api.jquery.com/delegate/#entry-longdesc

person CBroe    schedule 25.01.2015