Используем Template в JavaScript для клонирования элементов
HTML-код
- Опубликовано: 3 мар 2021
- Курс JS 2.0: itgid.info/course/javascript-2
Методы массивов: itgid.info/course/arraymethod
Курс HTML для JS разработчиков: itgid.info/course/html
Остальные курсы: itgid.info/
Телеграмм канал: t.me/itgid_info
Работаем с фрагментами html кода - template с помощью javascript.
Уважаемый Алекс, спасибо за ваши труды, с вами JS становится доступнее)
Спасибо! Мудрено конечно, но доступно и как оказывается удобно
Благодарю за отличнейшую подачу материала !
Только хотел предложить вам снять ролик на эту тему 🌞. Благодарю вас Александр!
материалов заметно улучшилось в последний год) спасибо)
Уууух тыыыы. Крутоооо. Все думал как можно было сделать такое. Оказывается колесо уже придумано.
Метод интересный, тот же самый createElement но под другим углом.
Компактнее использовать функцию конструктор и закидывать в нее тег и атрибуты.
Александр, а можно изначально правильную симантику поддерживать, иногда редко сталкиваешься с версткой и хз че там в ней поменялось и не хотелось бы смотреть на заведомо неправильную верстку, ведь в голове то откладывается...
Спасибо!!!
Спасибо!
Даже поставлю лайк до просмотра
Спасибо за полезное видео, было бы хорошо если бы Вы показали как делать темплейт на TypeScript
cool, Alexander
Спасибо
было бы здорово видеть это как раз на примере поп апов, сделать 1 шаблон под разный контент поп апа.
Айяй некрависо - вначале надо клонировать, только потом изменять. Тогда в t будет чистый базовый шаблон, а в вашем случае при рендере определенного блока будет старые данные прошлого блока.
+
Сань, все очень классно! Спасибо :)
🙏🏼
Увидел в этом классный функционал, который не озвучили. Через foreach из массива вставлять в темплейт строки/значения
Здравствуйте, Александр ) Через class проще же?
👍👍👍👍
прикольно, я всегда делал через невидимые элементы на странице, а тут оказывается спец-тэг есть.
Странно, не понял где на практике такое применяется. Создал более 20 сайтов и с такими сложностями не сталкивался!
Но интересный метод. Спасибо!
Да можно вообще обойтись, но с этим приятнее. Допустим у вас 10 всплывающих окон, которые нужно открывать с разными текстами, оформлением и т.д. Или Вы делаете аналог онлайн конструктора сайтов...
На самом деле очень удобный инструмент. Для примера, можно получить с бэкенда каталог товаров в виде файла json и потом в цикле по такому шаблону выводить элементы на странице.
Раньше формировал HTML-код с параметрами из базы данных на стороне сервера, но понимал, что по правильному логику надо разделять - бэкенд это данные, фронтенд это их отрисовка.. Теперь получаю с бэкенда json-массив и перебираю его по ключу со значением. В шаблоне ищем ключ в фигурных скобках {{id}} и подставляем вместо него значение. пример: *Заказ: {{id}}Цена: {{price}} Получается этакий шаблонизатор.. очень читабельный и короткий код.. Соррян если немного сумбурно))
@@user-tj1zi8rd4f для СЕО такая штука не сработает.
@@leem0ne Cогласен! Я просто это для специализированных SPA использую.. Туда нет доступа CEO ;)
Можно тоже div использовать с hidden атрибутом, и брать с него HTML. А так спасибо, незнал что есть такой тег новый.
10:10 - Александр, попробуйте екстеншн для вс кода - letrieu.expand-region )))) ну просто бомбически как облегчает выделение )) уже не могу без него комфортно работать
Думаю, куда гибче, проще и функциональнее подключить шаблонизатор. Сразу бизнес-логика и шаблон будут логично отделены.
Топ, дійсно якісний цікавий контент по JS
через цикл можно столько же вывести=))?
Cool!
Здравствуйте. Можете рассмотреть книгу "JavaScript 20 уроков для начинающих" Дронов. Интересно ваше мнение
Начни с Д. Флэнаган - JavaScript. Полное руководство (7-е изд. 2021)...
@@fishnetweaver7747 Уже читаю, но это ближе к справочнику. Не спорю, книга очень интересная, но мне кажется именно как учебник , книга не для начинающих.
@@Mushu404 Ну тады - Н. Морган - JavaScript для детей. Самоучитель по программированию - 2016, или я чего-то не понял?..
@@fishnetweaver7747 Да дело в том, что я смотрю курсы по Js, читаю Д.Флэнагана - JavaScript полное руководство. А начинал с книги по Js- Дронов "20 Уроков для начинающих".Я ее не дочитал,материал напоминает Learning JavaScript, примеры там скучные, да и задания слишком однотипные....Вот и интересно мнение.Ещё думал практиковаться по книге " Выразительный Js"вроде её хвалят.
@UCsWOWZCKTk4MCk_ha1r7Pcw почему курсы не смотреть?) Смотрел курсы от автора данного канала, честно - все очень здорово и интересно. Надеюсь, что автор и дальше будет выпускать выпуски по Js.
Интересно, но как по мне Shadow DOM тут подошел бы лучше
12:18 также один из плюсов лежит в части его клонирования и добавления в него информации - это возможность делать это в цикле. Например подгружать динамически информацию из БД и тут же через цикл рендерить кучу однообразных элементов на страницу но с разной информацией внутри этих элементов. Например точки с объявлениями о продаже недвижимости на карте.
Добрый вечер. Есть пример кода, как это делается?)
@@vit944 здравствуйте, вы случайно не разобрались?
А потом shadow dom
навіть не знав про тег template, робив схожу задачу з додавання до блоку класу hidden і копіював його через JS
Пробовал так же написать через content возвращает undefined
P.s понятно он работает только если блок template
Поэтому и появился React ) А ещё сразу напрашивается массив объектов цикл и функция.
ну вы бы код для ленивых выложили.... чёж вы так
Так есть веб-компоненты и слоты, зачем так париться)
Поподробнее можно или ссылочку на тему
зачем ради такого кода подключать сторонние либы или фреймворки? и где тут заморочки?
@@leem0ne какие сторонние либы я говорю подключать, почитайте что такое веб-компоненты
@@Atelier155 ну как минимум нужен babel с полифилами
Злыдень, (я про ), больше понравилось - "почему let, не знаю, можно написать и const - в принципе будет красивее", - прости, ухожу, без обид :)...
P. S. Пиши var - не "заморачивайся" :)...