Шаблонные литералы удивительны, но в последнее время я обнаружил, что они заставляют все выглядеть как общеизвестный гвоздь, особенно когда дело доходит до динамического обновления больших блоков HTML.
Я все еще работаю в среде, которая в основном является бэкэнд, где Perl генерирует HTML из шаблонов, поверх которых мы добавляем постепенно улучшенные компоненты JavaScript.
Когда ваш задний и передний конец необходимо иметь возможность генерировать общие шаблоны пользовательского интерфейса на основе библиотеки шаблонов, становится разочаровывающим, необходимо определить источник HTML для каждого шаблона пользовательского интерфейса в нескольких местах (один раз в Perl, один раз в JS).
<Шаблон>
Тег может быть полезен. Бэкэнд может генерировать HTML, необходимый для компонента (например, каждый элемент TODO в списке TODO), а JS может использовать этот шаблон HTML для генерации каждого нового элемента TODO.
Но единственный способ динамического вставки значений в этот шаблон, о котором я знаю, – это чрезвычайно неуклюжие использование селекторов CSS в содержании шаблона. (См.: https://blog.teamtreehouse.com/creating-reusable-markup-with-the-html-template-element )
Разве это не имеет гораздо большего смысла, теперь литералы шаблонов находятся в каждом крупном браузере, чтобы добавить поддержку в рамках <Шаблон>
API для выражений? например
hello ${where}
const tmpl = document.getElementById('test-template'); // where "MAGIC" is some means of supplying data as json document.body.appendChild(tmpl.content.cloneNode(true, MAGIC));
Веб -компоненты имеют
Система, но это требует принятия гораздо большей технологии. И, да, всегда есть усы/руль и др., Но опять же, это добавляет к полезной нагрузке JS. Да, мы также используем React, но обновление всего, чтобы отреагировать, не всегда возможно.
Я один, пытаясь сделать эту работу? Кто-нибудь нашел для этого решение без фреймворта или фреймворк-литовую линию?
Оригинал: “https://dev.to/davecranwell/template-literals-within-the-template-tag-seem-like-a-missed-opportunity-1deh”