Гибкая веб-разработка с Rails 6 Глава 11. Задача F

В настоящее время читает и работает над AWDR6 Сэмом Руби, Дэвидом Брайантом Коуплендом и Дэйвом Томасом. Я столкнулся с парой проблем и решил их. Я не мог найти некоторых решений, поэтому решил сделать здесь рабочий журнал для всех, кто мог бы работать с этой книгой.

Программисты-прагматики достаточно удивительны, чтобы разместить эту книгу и на Medium. Если вы хотите продолжить или попрактиковаться, перейдите по ссылке.

Глава 11. Задача F: добавить черту Ajax

Резюме

• Тележка для покупок перемещена на боковую панель. Затем мы организовали действие create для повторного отображения страницы каталога.
• Мы использовали remote: true для вызова действия LineItemsController.create () с использованием AJAX.
• Мы использовали шаблон ERB для создания JavaScript, который будет выполняться на клиенте.
• Мы написали вспомогательный метод, который отображает корзину только в том случае, если в ней что-то есть.
• Мы использовали Action Cable и JavaScript для обновления отображения каталога при изменении продукта.

Проблема: ArgumentError в ProductsController # update «неправильное количество аргументов (дано 1, ожидается 2)»

Исследование: ‘Может быть, вы ожидаете реального аргумента, а не ключевого слова arg во-вторых? Написанный вами код проходит (с предупреждением) на Ruby 2.7, но больше не работает на Ruby 3. - https://stackoverflow.com/a/68432507

Решение. Оберните аргумент в хэш, как это ожидается сейчас (Запуск Ruby -v 3+). Ключ p_id должен помочь в ответе на время воспроизведения ниже.

• Мы написали тест, который проверяет не только создание позиции, но и содержание ответа, полученного на такой запрос.

Время для игр

Проблема. Эта проблема запускает каскад проблем. В основном потому, что я привык работать над фреймворками JavaScript, появляются небольшие странности, к которым я не привык, и я не знаю, как их решить в рамках этой парадигмы. Например, как мне изменить flash [: notice] с помощью ajax? Как только вы окунетесь в ajax, вы начнете объединять свои контроллеры с множеством форматов ответов и тому подобным. Жаль, что не было более простого пути.

Текущее решение. Если у вас есть методика решения этой проблемы, поделитесь ею. Но на данный момент мое решение должно было быть двояким: потому что корзину можно очистить с помощью «кнопки пустой корзины» или путем удаления позиций. Оба решения одинаковы и кажутся мне взломанными.

//line_items/destroy.js.erb
cart = document.getElementById("cart")
cart.innerHTML = "<%= j render_if @cart && @cart.line_items.any?, @cart %>"
------------------------------------------------------------------//carts/destroy.js.erb
cart = document.getElementById("cart")
cart.hidden = true;

Проблема, созданная решением: теперь корзина скрыта. Если мы хотим добавить товар, он будет, но корзина не будет видна.

Решение проблемы, созданной решением. Убедитесь, что она не скрыта.

\\line_items/create.js.erb
cart = document.getElementById("cart")
cart.hidden = false; <--------
cart.innerHTML = "<%= j render(@cart) %>"

[✓] - Добавить кнопку рядом с каждым товаром в корзине. При нажатии он должен вызывать действие по уменьшению количества товара, удаляя его из корзины, когда количество достигает нуля.

Сделал это в предыдущей главе. С той же условной квалификацией, просто заглянул в будущее. Вид корзины Task E с кнопками ниже.

[✓] - Запустите его без Ajax, а затем добавьте его.

Проблема: « ArgumentError (слишком мало аргументов): в формате, в редактировании»

Расследование: ответы в нескольких форматах. Представьте, что ваш js выключен, но вы все равно хотите, чтобы ваши запросы работали.

Решение:

Оформить заказ на репо для полного контроллера. Перед действием set_cart имеет решающее значение для перерисовки корзины с помощью Ajax.

[✓] - Сделать изображения интерактивными. В ответ на щелчок добавьте связанный продукт в корзину.

Проблема: это было проблемой для меня, потому что я изучил Rails как API, поэтому изменил свое мышление с встроенного ванильного JS или JSX в React на методологию UJS (ненавязчивый JavaScript) в Rails.

Исследование. Я потратил слишком много времени, пытаясь понять, как добавить событие onclick к изображению или использовать помощники link_to и image_tag, пока я не прочитал и не изучил HTML.

Я хотел имитировать button_to и действие кнопки «Добавить в корзину».
При дальнейшем рассмотрении я увидел, что вспомогательная функция Rails button_to создает форму с вводом для отправки. Это подтолкнуло меня к мысли, что мы можем сделать то же самое с изображением.

Активация гиперссылок всегда приводит к HTTP-запросу GET. Однако, если ваше приложение является RESTful, некоторые ссылки на самом деле являются действиями, которые изменяют данные на сервере, и должны выполняться с запросами, отличными от GET. Этот атрибут позволяет пометить такие ссылки явным методом, например, опубликовать, поместить или удалить.

Принцип его работы заключается в том, что при активации ссылки создается скрытая форма в документе с атрибутом действие, соответствующим значению href ссылки, и методом, соответствующим data-method значение и отправляет эту форму. - https://guides.rubyonrails.org/working_with_javascript_in_rails.html#an-introduction-to-ajax

Решение. Я нашел помощника под названием image_submit_tag, который создает ввод для отправки с типом = ‘image’. Окружил это формой с удаленными данными (или в данном случае local: false), и это сработало! Он создал то же действие, что и кнопка. Корзина scss также отреагировала должным образом, анимировав фон.

Продолжение проблемы: Теперь, когда это работает как изображение, это сломало мой scss для моего изображения для презентации магазина.

Решение. Это больше не тег img, поэтому, конечно, он не будет работать. Теперь это ввод [type = ’image’], просто измените его, и это Gucci.

[✓] - При изменении продукта выделите продукт, который был изменен в ответ на получение широковещательного сообщения.

Проблема: я не слишком хорошо знаком с методологией UJS.

Расследование: Это работает как паб / подписка, поэтому я попытался использовать его, чтобы заставить его работать. Самой большой проблемой здесь было размещение. Мозг у меня устал, и я продолжал добавлять класс в список, прежде чем я мог перезаписать внутренний HTML-код тела 😩 Хромое движение с моей стороны. Но, наконец, я сдвинул его вниз.

Решение:

Позаимствовал класс подсветки тележки, ибо почему бы и нет.

Я участвую в книжном клубе Ruby, и если вы хотите присоединиться, напишите мне. Хотел бы встретиться с вами и стать лучше вместе.