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

Поділитися
Вставка
  • Опубліковано 7 лис 2024

КОМЕНТАРІ • 59

  • @giorgi_pa
    @giorgi_pa 3 роки тому +4

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

  • @jsb7239
    @jsb7239 3 роки тому

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

  • @4kilograms
    @4kilograms 3 роки тому +18

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

  • @denissavast
    @denissavast Рік тому

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

  • @artem_ka3863
    @artem_ka3863 3 роки тому +2

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

  • @shyma_grasious
    @shyma_grasious 3 роки тому

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

  • @user-bu3hzj734e4r
    @user-bu3hzj734e4r 3 роки тому +7

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

  • @agabekshamuratov4532
    @agabekshamuratov4532 3 роки тому

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

  • @aleksprimetv
    @aleksprimetv 3 роки тому +9

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

  • @chip253
    @chip253 3 роки тому +2

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

  • @alexcherepanov6152
    @alexcherepanov6152 3 роки тому +3

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

  • @игорьполторак-и9ы
    @игорьполторак-и9ы 3 роки тому +1

    Спасибо!!!

  • @sergeyplotnikov5031
    @sergeyplotnikov5031 3 роки тому +1

    Спасибо

  • @Wunderwaffe2333
    @Wunderwaffe2333 3 роки тому

    cool, Alexander

  • @Noname-i4f3z
    @Noname-i4f3z 2 роки тому

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

  • @hatefate5036
    @hatefate5036 3 роки тому +1

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

  • @dennisfisher2684
    @dennisfisher2684 3 роки тому +1

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

  • @Elkmany
    @Elkmany 3 роки тому

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

  • @ihopeingod1
    @ihopeingod1 2 роки тому

    🙏🏼

  • @MrColins710
    @MrColins710 3 роки тому +1

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

  • @uuuummm9
    @uuuummm9 3 роки тому

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

  • @Mushu404
    @Mushu404 3 роки тому +2

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

    • @fishnetweaver7747
      @fishnetweaver7747 3 роки тому +2

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

    • @Mushu404
      @Mushu404 3 роки тому +1

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

    • @fishnetweaver7747
      @fishnetweaver7747 3 роки тому +1

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

    • @Mushu404
      @Mushu404 3 роки тому

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

    • @Mushu404
      @Mushu404 3 роки тому

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

  • @mrakcw
    @mrakcw 3 роки тому

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

  • @arsa946
    @arsa946 3 роки тому +7

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

    • @itgid
      @itgid  3 роки тому +3

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

    • @batradzbazzaev
      @batradzbazzaev 3 роки тому +4

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

    • @АлександрШпилевский-т3в
      @АлександрШпилевский-т3в 3 роки тому +6

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

    • @leem0ne
      @leem0ne 3 роки тому +3

      @@АлександрШпилевский-т3в для СЕО такая штука не сработает.

    • @АлександрШпилевский-т3в
      @АлександрШпилевский-т3в 3 роки тому +2

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

  • @dimageorgiev5798
    @dimageorgiev5798 3 роки тому

    👍👍👍👍

  • @TheQuantum3k
    @TheQuantum3k 2 роки тому

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

  • @jsb7239
    @jsb7239 3 роки тому

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

    • @vit944
      @vit944 2 роки тому

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

    • @iadarch
      @iadarch Рік тому

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

  • @valentinknoll4106
    @valentinknoll4106 3 роки тому

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

  • @mikaelgevorgyan4521
    @mikaelgevorgyan4521 3 роки тому +1

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

  • @ДанилаМухин-в4р
    @ДанилаМухин-в4р 2 роки тому

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

  • @ПростоЧеловек-р1з
    @ПростоЧеловек-р1з 3 роки тому +2

    Cool!

  • @MrColins710
    @MrColins710 3 роки тому +1

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

  • @Vek0la
    @Vek0la 3 роки тому

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

  • @Vladikslavik
    @Vladikslavik 3 роки тому

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

  • @yuritian8830
    @yuritian8830 Рік тому

    А потом shadow dom

  • @Beyond-the-transcendent
    @Beyond-the-transcendent 2 роки тому

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

  • @Atelier155
    @Atelier155 3 роки тому

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

    • @batradzbazzaev
      @batradzbazzaev 3 роки тому

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

    • @leem0ne
      @leem0ne 3 роки тому

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

    • @Atelier155
      @Atelier155 3 роки тому

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

    • @leem0ne
      @leem0ne 3 роки тому

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

  • @fishnetweaver7747
    @fishnetweaver7747 3 роки тому

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

  • @exploringtheworld8780
    @exploringtheworld8780 3 роки тому +1

    Спасибо!