Ruby on Rails 7, урок #24 | Turbo Frames

Сегодня мы узнаем о том, как работать с Turbo Frames в Rails. В частности, мы сделаем динамическое добавление, редактирование и удаление записей, а также обсудим некоторые особенности этих фреймов.
Таймкоды:
00:00 Введение
01:00 Динамическое отображение формы
05:30 Особенности плагинов JS во фреймах
07:10 Динамическое добавление записи на страницу
10:30 Вывод сообщений flash
12:40 Динамическое редактирование
14:50 Динамическое удаление
16:00 Перерисовка всей страницы
17:20 Разбиение по страницам и фреймы
18:50 Отображение и редактирование вопроса
21:20 Последние штрихи
23:30 Заключение
Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам: / @ilyabodrovkrukowski
Boosty: boosty.to/bodrovis
Patreon: / bodrovis
DonationAlerts: www.donationalerts.com/r/bodr...
Аккаунт Ethereum (ETH): 0x719C2d2bcC155c85190f20E1Cc3710F90FAFDa16
Исходный код github.com/bodrovis-learning/...
Канал Telegram: t.me/dev_in_ruby_colors
Наш чат в Telegram: t.me/joinchat/MxYT6-01eeA1NTYy
Мой сайт: bodrovis.tech

[@IlyaBodrovKrukowski]

Рекомендую также посмотреть новый, более полный плейлист о Turbo, Stimulus и прочих новых фичах kzbin.info/www/bejne/jKa1YZ13iNpgjcU

[@rickbacker1]

Спасибо за урок! Прекрасные ощущения, когда контент на странице меняется без обновления всей страницы :)

[@IlyaBodrovKrukowski]

[@user-dv1vu1om6o]

Спасибо Вам большое за контент))) очень жду видео о stimulus reflex

[@dastanabeuov4394]

Спасибо. Как всегда годный контент.

[@OmGdoob]

23:00 форму можно убрать даже без js и стимулуса, в ответе контроллера можно делать что-то вроде: render turbo_stream: turbo_stream.append(:questions, @question) + turbo_stream.update('new_question', '') либо соответствующий код в create.turbo_stream.erb

[@IlyaBodrovKrukowski]

Да, это правда

[@null6216]

Спасибо!

[@IlyaBodrovKrukowski]

[@stipeydikey6599]

Спасибо за прекрасный урок! Не подскажете, как без указания пути сделать так, чтобы появлялся паршал? То есть я хочу, чтобы по нажатию на кнопку вместо нее появлялся паршал лежащий у меня в той же папке view. Не знаю, делается ли это с помощью турбо, потому как турбо отслеживает запросы, а тут по сути запроса и не должно быть... Или должен...

[@IlyaBodrovKrukowski]

Там в любом случае должен быть запрос, он так просто не может partial показать, увы. Это тогда надо partial запихивать в ваше представление, но эту разметку скрывать, а потом по нажатию показывать. Иначе, боюсь, никак. Сейчас на канале появилась новая серия про Hotwire - урок по Stimulus уже опубликован (см последние видео), он как раз с такими штуками может помочь. А завтра будет ещё про Turbo и подробнее, как фреймы работают

[@stipeydikey6599]

Понял, сейчас посмотрю, спасибо огромное!

[@cultclick8560]

Приветствую, Илья! Спасибо за Ваши видео, наконец-то в русскоязычном сегменте кто-то стал разбираться и делиться опытом по этому Hotwire. Все повторил за вами в видео. Даже форма экшена new срабатывает как у вас в списке вопросов, а вот при создании объекта модели (когда произвожу сабмит формы new), вылетает ошибка в консоли Response has no matching element Вот моя вьюха: Где я не доглядел? Не направите на мысль?

[@IlyaBodrovKrukowski]

Странно, вообще на вид всё похоже на правду. А вы смотрели в консоли разработчика, там точно в браузере везде ID правильные, всё сгенерировалось корректно?.. Тк вообще должно работать

[@cultclick8560]

@@IlyaBodrovKrukowski Я извиняюсь, я сдезинформировал. Все работает. После того как я нажимаю сабмит, вопрос действительно добавляется, но стоит ее еще раз нажать, как добавляется еще и еще вопросы. Но как убрать потом форму new после одного сабмита?

[@IlyaBodrovKrukowski]

@@cultclick8560 @Cult Click Ну либо привязываться к событию "фрейм отрендерен", либо делать контроллер Stimulus, слушать событие "форма отправлена" и потом что-то делать после этого. Совсем простого способа нет

[@ledockol]

Форма не очищается из-за того что немного своеобразно реализован турбо-фрейм. Например, форму обычно не оборачивают в турбо фрейм, она имеет лишь уникальный id (типа dom_id question), а вот паршиалы new/edit как раз и обернуты в турбофрейм и иснтансными переменными @question, которые создаются в контроллере или по месту (Question.new - для new). Вообще это все можно обернуть в один турбо-фрейм и тогда выйдет полноценный SPA), в котором все переходы будут происходить без перезагрузки страницы (заголовок меняться не будет).

[@IlyaBodrovKrukowski]

[@kirill_prog]

Что-то у меня ютуб не смог деньги списать по спонсорству. =( попробую ещё разок оформить

[@kirill_prog]

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

[@kirill_prog]

Деньги там есть.

[@kirill_prog]

Может перейти на Boosty? Это проде РФ сервис и там процентов меньше нужно отдавать.

[@IlyaBodrovKrukowski]

@@kirill_prog Я боюсь, что теперь для спонсорства из РФ возможностей нет. Тк мой канал оформлен в ЕС, то получать платежи из РФ я не могу. А блоггерам, которые в РФ, монетизацию вообще отключили. В любом случае благодарю вас поддержку, это очень приятно. Рано или поздно постараюсь как-нибудь с этим разобраться, но из-за санкций, вероятно, с этим будут серьёзные проблемы.