AMP-EMAIL:从amp-state迭代项目列表
AMP-EMAIL:从amp-state迭代项目列表
提问于 2019-11-13 04:46:06
我正在尝试找到一种方法来迭代存储在amp-email设置中的amp-state中的数据。这个问题源于这样一个事实:我希望我的服务器根据用户的输入(在本例中是zipcode)返回不同的数据。由于我不能在amp-email中的amp-list的src上使用amp-bind的功能，我不确定如何实现这一点。
下面是我的代码的人工示例：
<!DOCTYPE html>
<html ⚡4email>
<head>
...
</head>
<body>
<amp-state id="state">
<script type="application/json">
{}
</script>
</amp-state>
<div class="container">
<!-- STEP 1 -->
<div class="step" id="step1" [hidden]="page != 'home'">
<form
id="form1"
method="POST"
action-xhr="https://localhost:3333/getDataFromZip"
on="submit-success:
AMP.setState({
page: 'step2',
returnedData: event.response.data,
})"
>
<input type="text" name="zip" />
<button type="submit">
Submit
</button>
</form>
</div>
<!-- STEP 2 -->
<div class="step" id="step2" [hidden]="page != 'step2'">
<!-- ITERATE OVER state.returnedData HERE -->
</div>
</div>
</body>
</html>回答 1
Stack Overflow用户
发布于 2019-11-20 07:31:34
以这种方式迭代AMP状态是不可能的。
您有两个选择：
选项1
改为使用八字胡模板。您可以在amp-form中执行此操作，方法是在具有submit-success属性的元素中放置一个八字胡模板(有关详细信息，请参阅amp-form文档的Success/error response rendering部分)：
<!DOCTYPE html>
<html ⚡4email>
<head>
...
</head>
<body>
<amp-state id="state">
<script type="application/json">
{}
</script>
</amp-state>
<div class="container">
<!-- STEP 1 -->
<div class="step" id="step1">
<form
id="form1"
method="POST"
action-xhr="https://localhost:3333/getDataFromZip"
on="submit-success:
AMP.setState({
page: 'step2'
})"
>
<div [hidden]="page != 'home'">
<input type="text" name="zip" />
<button type="submit">
Submit
</button>
</div>
<!-- STEP 2 -->
<div submit-success >
<template type="amp-mustache">
<div class="step" id="step2" [hidden]="page != 'step2'">
{{#data}}
<!-- add template for each item here -->
{{/data}}
</div>
</template>
</div>
</form>
</div>
</div>
</body>
</html>选项2
如果您的amp-state中的数组中只有很少的项，则可以对数组访问进行硬编码。例如，如果您希望每个数组项都有一个<p>标记：
<amp-state id="state">
<script type="application/json">
{
items: ['a', 'b', 'c']
}
</script>
</amp-state>
<p [hidden]="!state.items[0]" [text]="state.items[0]"></p>
<p [hidden]="!state.items[1]" [text]="state.items[1]"></p>
<p [hidden]="!state.items[2]" [text]="state.items[2]"></p>
<p [hidden]="!state.items[3]" [text]="state.items[3]"></p>
<p [hidden]="!state.items[4]" [text]="state.items[4]"></p>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58826413
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号