No video :(

Используем Template в JavaScript для клонирования элементов

Подписаться 140 тыс.

Просмотров 19 тыс.

50% 1

Курс JS 2.0: itgid.info/cou...
Методы массивов: itgid.info/cou...
Курс HTML для JS разработчиков: itgid.info/cou...
Остальные курсы: itgid.info/
Телеграмм канал: t.me/itgid_info
Работаем с фрагментами html кода - template с помощью javascript.

Опубликовано:

27 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 59

@4kilograms 3 года назад

Уважаемый Алекс, спасибо за ваши труды, с вами JS становится доступнее)

@giorgi_pa 3 года назад

Уууух тыыыы. Крутоооо. Все думал как можно было сделать такое. Оказывается колесо уже придумано.

@artem_ka3863 3 года назад

Спасибо! Мудрено конечно, но доступно и как оказывается удобно

@denissavast Год назад

Благодарю за отличнейшую подачу материала !

@shyma_grasious 3 года назад

материалов заметно улучшилось в последний год) спасибо)

@user-bu3hzj734e4r 3 года назад

Метод интересный, тот же самый createElement но под другим углом. Компактнее использовать функцию конструктор и закидывать в нее тег и атрибуты.

@jsb7239 3 года назад

Только хотел предложить вам снять ролик на эту тему 🌞. Благодарю вас Александр!

@aleksprimetv 3 года назад

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

@MrColins710 3 года назад

Топ, дійсно якісний цікавий контент по JS

@chip253 3 года назад

Айяй некрависо - вначале надо клонировать, только потом изменять. Тогда в t будет чистый базовый шаблон, а в вашем случае при рендере определенного блока будет старые данные прошлого блока.

@urik1709 2 года назад

@alexcherepanov6152 3 года назад

было бы здорово видеть это как раз на примере поп апов, сделать 1 шаблон под разный контент поп апа.

@user-ed8eb6cx7o 2 года назад

Спасибо за полезное видео, было бы хорошо если бы Вы показали как делать темплейт на TypeScript

@hatefate5036 3 года назад

Увидел в этом классный функционал, который не озвучили. Через foreach из массива вставлять в темплейт строки/значения

@agabekshamuratov4532 3 года назад

Даже поставлю лайк до просмотра

@Elkmany 3 года назад

Сань, все очень классно! Спасибо :)

@jsb7239 3 года назад

12:18 также один из плюсов лежит в части его клонирования и добавления в него информации - это возможность делать это в цикле. Например подгружать динамически информацию из БД и тут же через цикл рендерить кучу однообразных элементов на страницу но с разной информацией внутри этих элементов. Например точки с объявлениями о продаже недвижимости на карте.

@vit944 Год назад

Добрый вечер. Есть пример кода, как это делается?)

@iadarch Год назад

@@vit944 здравствуйте, вы случайно не разобрались?

@arsa946 3 года назад

Странно, не понял где на практике такое применяется. Создал более 20 сайтов и с такими сложностями не сталкивался! Но интересный метод. Спасибо!

@itgid 3 года назад

Да можно вообще обойтись, но с этим приятнее. Допустим у вас 10 всплывающих окон, которые нужно открывать с разными текстами, оформлением и т.д. Или Вы делаете аналог онлайн конструктора сайтов...

@batradzbazzaev 3 года назад

На самом деле очень удобный инструмент. Для примера, можно получить с бэкенда каталог товаров в виде файла json и потом в цикле по такому шаблону выводить элементы на странице.

@user-tj1zi8rd4f 3 года назад

Раньше формировал HTML-код с параметрами из базы данных на стороне сервера, но понимал, что по правильному логику надо разделять - бэкенд это данные, фронтенд это их отрисовка.. Теперь получаю с бэкенда json-массив и перебираю его по ключу со значением. В шаблоне ищем ключ в фигурных скобках {{id}} и подставляем вместо него значение. пример: *Заказ: {{id}}Цена: {{price}} Получается этакий шаблонизатор.. очень читабельный и короткий код.. Соррян если немного сумбурно))

@leem0ne 3 года назад

@@user-tj1zi8rd4f для СЕО такая штука не сработает.

@user-tj1zi8rd4f 3 года назад

@@leem0ne Cогласен! Я просто это для специализированных SPA использую.. Туда нет доступа CEO ;)

@exploringtheworld8780 3 года назад

Спасибо!

@Wunderwaffe2333 3 года назад

cool, Alexander

@TheQuantum3k 2 года назад

Думаю, куда гибче, проще и функциональнее подключить шаблонизатор. Сразу бизнес-логика и шаблон будут логично отделены.

@user-fq6yj8dq4b 3 года назад

Спасибо!!!

@sergeyplotnikov5031 3 года назад

Спасибо

@ihopeingod1 Год назад

🙏🏼

@uuuummm9 3 года назад

прикольно, я всегда делал через невидимые элементы на странице, а тут оказывается спец-тэг есть.

@dennisfisher2684 3 года назад

Здравствуйте, Александр ) Через class проще же?

@mrakcw 3 года назад

10:10 - Александр, попробуйте екстеншн для вс кода - letrieu.expand-region )))) ну просто бомбически как облегчает выделение )) уже не могу без него комфортно работать

@Mushu404 3 года назад

Здравствуйте. Можете рассмотреть книгу "JavaScript 20 уроков для начинающих" Дронов. Интересно ваше мнение

@fishnetweaver7747 3 года назад

Начни с Д. Флэнаган - JavaScript. Полное руководство (7-е изд. 2021)...

@Mushu404 3 года назад

@@fishnetweaver7747 Уже читаю, но это ближе к справочнику. Не спорю, книга очень интересная, но мне кажется именно как учебник , книга не для начинающих.

@fishnetweaver7747 3 года назад

@@Mushu404 Ну тады - Н. Морган - JavaScript для детей. Самоучитель по программированию - 2016, или я чего-то не понял?..

@Mushu404 3 года назад

@@fishnetweaver7747 Да дело в том, что я смотрю курсы по Js, читаю Д.Флэнагана - JavaScript полное руководство. А начинал с книги по Js- Дронов "20 Уроков для начинающих".Я ее не дочитал,материал напоминает Learning JavaScript, примеры там скучные, да и задания слишком однотипные....Вот и интересно мнение.Ещё думал практиковаться по книге " Выразительный Js"вроде её хвалят.

@Mushu404 3 года назад

@UCsWOWZCKTk4MCk_ha1r7Pcw почему курсы не смотреть?) Смотрел курсы от автора данного канала, честно - все очень здорово и интересно. Надеюсь, что автор и дальше будет выпускать выпуски по Js.

@user-bo6zf7ip7p 3 года назад

Cool!

@valentinknoll4106 3 года назад

Можно тоже div использовать с hidden атрибутом, и брать с него HTML. А так спасибо, незнал что есть такой тег новый.

@mikaelgevorgyan4521 3 года назад

через цикл можно столько же вывести=))?

@dimageorgiev5798 3 года назад

👍👍👍👍

@user-hh2jk7rr9e 2 года назад

Интересно, но как по мне Shadow DOM тут подошел бы лучше

@yuritian8830 Год назад

А потом shadow dom

@MrColins710 3 года назад

навіть не знав про тег template, робив схожу задачу з додавання до блоку класу hidden і копіював його через JS

@Vladikslavik 3 года назад

Поэтому и появился React ) А ещё сразу напрашивается массив объектов цикл и функция.

@Vek0la 3 года назад

Пробовал так же написать через content возвращает undefined P.s понятно он работает только если блок template

@Beyond-the-transcendent Год назад

ну вы бы код для ленивых выложили.... чёж вы так

@Atelier155 3 года назад

Так есть веб-компоненты и слоты, зачем так париться)

@batradzbazzaev 3 года назад

Поподробнее можно или ссылочку на тему

@leem0ne 3 года назад

зачем ради такого кода подключать сторонние либы или фреймворки? и где тут заморочки?

@Atelier155 3 года назад

@@leem0ne какие сторонние либы я говорю подключать, почитайте что такое веб-компоненты

@leem0ne 3 года назад

@@Atelier155 ну как минимум нужен babel с полифилами

@fishnetweaver7747 3 года назад

Злыдень, (я про ), больше понравилось - "почему let, не знаю, можно написать и const - в принципе будет красивее", - прости, ухожу, без обид :)... P. S. Пиши var - не "заморачивайся" :)...