StimulusJS父cart控制器如何通过子cart-item值计算购物车总价

核心实现原则：利用Stimulus的事件冒泡机制做跨控制器通信，避免父子控制器直接耦合，后续新增、删除购物车条目时无需修改事件绑定逻辑。

1. 修正HTML结构并补全标记 #

原有HTML存在两处绑定错误：第一个购物车条目的数量选择器事件、target属性错绑到了总价段落标签上；另外缺少cart控制器需要的总价target，以及cart-item控制器读取单价所需的value属性，修正后代码如下：

<div class="cart" 
     data-controller='cart'
     data-action="cart-item:updated->cart#update">
  <!-- 直接在父容器监听子元素冒泡的更新事件，无需写额外JS绑定代码 -->
  <div class="cart-item" 
       data-controller='cart-item'
       data-cart-item-unit-price-value="20">
    <p class='unit-price'>20</p>
    <input type="number" name="quantity" value="1" 
           data-action="input->cart-item#update"
           data-cart-item-target="quantity">
    <p class='total-price' data-cart-item-target="totalPrice">20</p>
  </div>
  <div class="cart-item" 
       data-controller='cart-item'
       data-cart-item-unit-price-value="10">
    <p class='unit-price'>10</p>
    <input type="number" name="quantity" value="2" 
           data-action="input->cart-item#update"
           data-cart-item-target="quantity">
    <p class='total-price' data-cart-item-target="totalPrice">20</p>
  </div>
  <div class="cart-total" data-cart-target="total">
    40
  </div>
</div>

注：把事件从change换成input可以实现输入数量时实时更新价格，不需要等输入框失焦才触发计算。如果使用Stimulus 2.x旧版本，可将data-cart-item-target/data-cart-target简写为旧版的data-target属性。

2. 调整cart-item控制器逻辑 #

单条购物车条目计算完自身总价后，派发一个冒泡的自定义事件通知父控制器即可，不需要直接引用父控制器方法：

// cart_item_controller.js
export default class extends Controller {
  static targets = ["totalPrice", "quantity"]
  static values = {
    unitPrice: Number, // 声明为Number类型，Stimulus会自动做类型转换
  }

  update(){
    // 计算单条目总价
    const itemTotal = this.unitPriceValue * parseInt(this.quantityTarget.value)
    this.totalPriceTarget.textContent = itemTotal
    // 派发更新事件，默认会向上冒泡，父容器可直接捕获
    this.dispatch("updated", { detail: { itemTotal } })
  }
}

3. 实现cart控制器总价计算逻辑 #

父控制器每次收到子条目发来的更新事件时，遍历所有购物车条目的总价求和即可，逻辑和子条目数量完全解耦：

// cart_controller.js
export default class extends Controller {
  static targets = ["total"]

  connect() {
    // 页面初始化时计算一次总价，避免初始渲染值错误
    this.update()
  }

  update(){
    let cartTotal = 0
    // 遍历所有条目的总价节点累加
    this.element.querySelectorAll(".cart-item .total-price").forEach(priceEl => {
      cartTotal += parseFloat(priceEl.textContent) || 0
    })
    // 更新全局总价显示
    this.totalTarget.textContent = cartTotal
  }
}

可选优化 #

• 涉及小数金额计算时，可引入金额精度处理逻辑，避免JS浮点数计算精度误差（比如0.1+0.2得到0.30000000004的问题）。
• 如果需要支持删除购物车条目，只要删除对应DOM节点后手动触发一次cart#update方法即可，不需要额外改动其他逻辑。

内容的提问来源于stack exchange，提问作者David Geismar