Блог

Я создаю простое приложение для корзины покупок и использую Stimulum 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;

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

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

Спасибо!

Из опубликованного вами кода и описания я полагаю, что вы используете один экземпляр контроллера стимула для всех товаров корзины. Что-то вроде этого:

 <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 в каждой строке. Это должно решить вашу проблему. Недостатком является то, что строки не могут взаимодействовать друг с другом, но вы можете добиться этого с помощью другого контроллера стимулов, если вам это нужно.