首页 > 解决方案 > AMP 如何在 amp-list 项上使用 amp-bind setState

问题描述

我想更新购物车中产品的数量。由于样式的原因,我不想使用默认的输入类型编号,因此在我的文本输入周围有 2 个按钮来更新数量。

这是我的状态:

  <amp-state id="checkout" src="/api/shopify/checkout" [src]="/api/shopify/checkout"></amp-state>

这是我的表格和清单:

<form method="POST"
      id="form"
      action-xhr="/api/shopify/checkout"
      encType="application/x-www-form-urlencoded"
      target="_top"
      on="submit-success: AMP.setState({checkout: event.response})">
    <amp-list src="/api/shopify/checkout"
              [src]="checkout.items"
              width="300"
              height="600"
              layout="fill"
              binding="refresh">
        <template type="amp-mustache">
            <button on="tap:AMP.setState({ quantity: quantity - 1 })">-</button>
                <input type="text"
                       name="{{ variantId }}"
                       value="{{ quantity }}"
                       pattern="[0-999]"
                       on="change:form.submit" />
            <button on="tap:AMP.setState({ quantity: quantity + 1 })">+</button>
        </template>
    </amp-list>
</form>

我想更新我的项目的数量,然后我假设我的文本输入的 on="change:form.submit" 将调用我的服务器刷新并更新数据。如果我更新输入,它已经可以工作了,只是按钮状态不行。

标签: amp-htmlamp-listamp-bind

解决方案


推荐阅读