0

我正在构建一个简单的购物车应用程序并使用 Stimulus JS 来处理 Rails 视图和 Javascript 逻辑之间的交互。

在购物车页面中，我通过在 UI 中循环显示产品，如下所示：


<% @curr_cart.items.each do |item| %>

     <span id="test" data-target="cart.count">

        <%= item.quantity %>

     </span>

我正在尝试添加从购物车中删除商品的“删除”功能。我的删除逻辑工作正常，但我无法更新正确项目的数量。每次我删除一个产品时，只有第一个项目的数量会减少。

这就是我更新的方式：

this.countTarget.innerHTML = Number(this.countTarget.innerHTML)- 1;

尝试使用值和数据属性但没有运气：皱眉：

今天花了大部分时间，试图弄清楚这一点，但无法做到。关于如何解决这个问题的任何想法或建议？

谢谢！

4

1 回答 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。这应该可以解决您的问题。缺点是线路无法相互通信，但如果需要，您可以通过另一个刺激控制器来实现。

于 2020-12-20T15:35:34.633 回答