Я создаю простое приложение для покупок и использую Stimulus JS для обработки взаимодействия между представлениями Rails и логикой Javascript.
На странице корзины я показываю продукт, просматривая его в пользовательском интерфейсе следующим образом:
<% @curr_cart.items.each do |item| %>
<span id = "test" data-target = "cart.count">
<%= item.quantity %>
</span>
Я пытаюсь добавить функцию «удалить», которая удаляет элементы из корзины. Моя логика удаления работает нормально, но я не могу обновить количество нужного элемента. Каждый раз, когда я удаляю товар, уменьшается количество только первого товара.
Вот как я обновляюсь:
This.countTarget.innerHTML = Number(this.countTarget.innerHTML)- 1;
Пробовал использовать значения и атрибуты данных, но безуспешно :frowning:
Провел большую часть дня, пытаясь понять это, но не смог. Любая идея или предложения о том, как это можно исправить?
Спасибо!
Судя по коду и описанию, которые вы опубликовали, я предполагаю, что вы используете один экземпляр контроллера стимулов для всех элементов корзины. Что-то вроде этого:
<div data-controller = "cart-items">
<% @curr_cart.items.each do |item| %>
<span id = "test" data-target = "cart.count">
<%= item.quantity %>
</span>
...
other fields
...
<% end %>
</div>
У этого подхода есть одна проблема: вам нужно выяснить, какой элемент вы пытаетесь редактировать, и изменить правильные поля. Насколько я понимаю, элементы не должны зависеть друг от друга. Я бы предложил вам использовать один экземпляр контроллера стимула в строке:
<% @curr_cart.items.each do |item| %>
<div data-controller = "cart-item">
<span id = "test" data-target = "cart.count">
<%= item.quantity %>
</span>
...
other fields
...
</div>
<% end %>
Теперь каждая строка привязана сама к себе в JS-контроллере, вам не нужно искать конкретную строку в массиве countTargets, у вас есть только один countTarget в каждой строке. Это должно решить вашу проблему. Недостатком является то, что линии не могут общаться друг с другом, но вы можете добиться этого с помощью другого контроллера стимулов, если вам это нужно.
Я не думаю, что должны быть какие-то проблемы, Stimulus был создан с учетом этого использования, один контроллер можно использовать много раз на одной странице, и он должен работать нормально.
Спасибо! Это то, что я в итоге сделал. Однако хотелось бы знать, есть ли какие-либо проблемы с наличием/созданием нескольких экземпляров контроллера (например, если это делалось для большого списка элементов)?