Не удалось получить правильное целевое значение в приложении Ruby on Rails

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

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

Спасибо!

JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
Раскрытие чувствительных данных
Раскрытие чувствительных данных
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Руководство ChatGPT по продаже мини JS-файлов
Руководство ChatGPT по продаже мини JS-файлов
JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...
0
0
757
1
Перейти к ответу Данный вопрос помечен как решенный

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

Спасибо! Это то, что я в итоге сделал. Однако хотелось бы знать, есть ли какие-либо проблемы с наличием/созданием нескольких экземпляров контроллера (например, если это делалось для большого списка элементов)?

KLMM 21.12.2020 22:31

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

edariedl 23.12.2020 15:55

Другие вопросы по теме