刺激如何从不同子控制器中的值（购物车 - ; CART项目）中计算出父控制器中的值

Question

我正在建造一个用刺激的购物车。购物车摘要页面显示多个购物车项目。购物车物品具有单价和数量。 每个购物车项目组件都有一个数量选择器，当数量数更改Cartitem元素的总价格totalCartitem = uttercartitem = UnitPrice x量，如果还必须重新计算code code code total cartcartcartprice和总价= sum（totalcartitem）

这是对HTML结构的简化

<div class="cart" data-controller='cart'>
  <div class="cart-item" data-controller='cart-item'>
    <p class='unit-price'>20</p>
    <input type="number" name="quantity" value="1">
    <p class='total-price' data-target='cart-item.totalPrice' data-action="change->cart-item#update" data-target='cart-item.quantity'>20</p>
  </div>
  <div class="cart-item" data-controller='cart-item'>
    <p class='unit-price'>10</p>
    <input type="number" name="quantity" value="2" data-action="change->cart-item#update" data-target='cart-item.quantity'>
    <p class='total-price' data-target='cart-item.totalPrice'>20</p>
  </div>
  <div class="cart-total">
    40
  </div>
</div>

我的购物车项目控制器的工作正常，并正确更新了UI中的CART项目的TotalPrice。

export default class extends Controller {
  static targets = ["totalPrice", "quantity"]

  static values = {
    unitPrice: String,
  }

  connect() {
    console.log("hello from StimulusJS")
  }

  update(){
    this.totalPriceTarget.textContent = parseFloat(this.unitPriceValue) * parseInt(this.quantityTarget.value)
  }
}

但是，我现在对如何更新totalcartprice感到迷失。我觉得这应该是cartcontroller包装Cartitems元素的责任，但我不知道正确实现此目的的ID是什么ID。 我觉得我应该在每个编号输入选择器上添加更改 fording ，以适用于每个购物车的数量，但是我应该将什么添加到购物车＃更新方法中，以重新计算总计每个购物车物品？

export default class extends Controller {
  static targets = ["total"]
  connect() {
    console.log("hello from StimulusJS")
  }

  update(){
    // let details = event.detail;
    // this.cartItemChildren.forEach((item) => console.log(item.totalValue))
  }
}

Answer 1

根据刺激文档，始终最好开始使用HTML 。通过扩展，最好以可访问的方式构建HTML，并查看浏览器为您提供的东西而不重新发明内容。

当您构建表单时，即使没有提交此表单，也最好使用表单元素。 https://developer.mozilla.orgg/en-us/docs/ Web/api/htmlformelement

还有一个非常有用的输出元素，可以帮助您根据某些输入值分配输出值。 https://develoverer.mozilla.org/ en-us/doc/web/html/element/umput＃attr-for

最后，形式元素有一个DOM API，可让您通过其name name 属性，这是form.elements。 https：// https://developer.mozilla.org/en-us/ docs/web/api/htmlformelement/elements

将其结合在一起，我们可以从以下HTML开始...

html

• 我们只是将我们的控制器操作附加到整个表单上，因此我们可以聆听任何更改的更改表格中的输入。
• 一个用于这种情况的控制器，而文档推荐较小的粒状控制器，但这里最小的单位内容似乎是整个形式。
• 每个输入都有一个唯一的ID，每个输出元素引用使用此ID的输入使用 for 属性 - 这将更好当我们想解析值并更新输出时，请用方便。
• 我们还具有使用相同ID的单位价格的其他数据属性，请注意，此数据属性并不特别，但只给了我们一种“查找”相关价格的方法。无需为这种简单情况创建控制器目标。
• 注意：这是假设您不必支持IE11（因为输出元素在该浏览器中不起作用）。

<form class="cart" data-controller='cart' data-action="change->cart#updateTotals">
  <div class="cart-item">
    <span class='unit-price' data-price-for="cart-item-1">20</span>
    x
    <input type="number" name="quantity" value="1" id="cart-item-1">
    =
    <output class="total-price" for="cart-item-1" name="item-total">20</output>
  </div>
  <div class="cart-item">
    <span class='unit-price' data-price-for="cart-item-2">10</span>
    x
    <input type="number" name="quantity" value="1" id="cart-item-2">
    =
    <output class="total-price" for="cart-item-2" name="item-total">10</output>
  </div>
  <div class="cart-total">
    Total: <span data-cart-target="total">30</span>
  </div>
</form>

JavaScript（控制器）

• 我们的控制器除了总的总目标外，实际上并不需要其他任何东西，因为我们可以在基本表单的附件控制器上使用this.Element。
• 我们避免使用通用更新方法，并尝试使用updateTotals更具体。
• 我们在表单上使用elements api，以获取具有名称'item-total'的元素（请注意，输出名称未提交）。 https：// https://developer.mozilla.org/en-us/ doc/web/api/htmlformelement/elements
• 一旦拥有每个输出元素，我们就可以通过和输入的ID找到相关的输入元素，然后找到数据属性以找到价格。
• 然后，我们计算一个宏伟的总数，最后更新DOM中的所有值。
• 注意：数字解析非常基本，最好在这里添加一些安全性，也假设您不需要支持IE11。

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
  static targets = ['total'];

  connect() {
    this.updateTotals();
  }

  updateTotals() {
    // parse the form elements to get all data
    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements

    const cartItems = [...this.element.elements['item-total']].map(
      (outputElement) => {
        const forId = outputElement.getAttribute('for');
        const priceElement = document.querySelector(`[data-price-for='${forId}']`);
        const price = Number(priceElement.textContent);
        const quantity = Number(document.getElementById(forId).value);
        return { outputElement, total: quantity * price };
      }
    );

    // calculate the grand total
    const grandTotal = cartItems.reduce(
      (runningTotal, { total }) => runningTotal + total,
      0
    );

    // update the grand total
    this.totalTarget.textContent = grandTotal;

    // update totals for each cart item
    cartItems.forEach(({ outputElement, total }) => {
      outputElement.textContent = total;
    });

    console.log('form updated', { grandTotal, cartItems });
  }
}