amp-html - 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" 将调用我的服务器刷新并更新数据。如果我更新输入,它已经可以工作了,只是按钮状态不行。
解决方案
推荐阅读
- python - 为什么 Python 垃圾收集器似乎不适用于 AWSIotMQTTClient 实例?
- json - 绑定 JSON 以在 AngularJs 中为一对多关系构建动态表单,并在两个表中都有父子关系
- php - 发送 PHP 变量 - setInterval 只工作一次
- php - 如何在 Laravel 中将日期字符串更改为单词?
- java - OSMDroid - 如何设置两个瓦片源?
- node.js - 尝试使用 npx create-react-app 时出现超时错误
- vue.js - 如何从 Vuetify 的 v-data-table 中删除单击的行?
- javascript - css脚本工作但js脚本在Django中不起作用
- swift - 设置嵌套结构并通过 FireStore [Swift] 填充
- flutter - 如何在 Flutter 中的时间选择器的标题上添加一些文本?