用户互动后的动态内容

简介

这是一个示例，展示如何在用户交互后显示动态内容：产品可用性将根据产品选择显示。

设置

我们使用 amp-bind 来动态更新页面内容。

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

如何获取动态内容

通过将 amp-bind 和 amp-state 与 JSON 端点结合使用，用户可以在交互后获取最新数据。由于 amp-bind 语句不会在页面加载时评估，因此更新后的状态仅在用户交互后可用，这对于特定产品可用性等用例非常有效。

请选择一个产品

<amp-state id="products" src="/static/samples/json/products.json"></amp-state>

<amp-img on="tap:AMP.setState({ productId: 0})" src="/static/samples/img/red_apple_1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<amp-img on="tap:AMP.setState({ productId: 1})" src="/static/samples/img/green_apple_1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<amp-img on="tap:AMP.setState({ productId: 2})" src="/static/samples/img/product1_alt1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<div [text]="products[productId] + ' available'">Please select a product</div>

需要进一步解释？

如果此页面上的解释没有涵盖你所有的问题，请随时联系其他 AMP 用户讨论你的具体用例。

前往 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励你的参与和贡献！我们希望你成为我们开源社区的持续参与者，但我们也欢迎你为特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

作者 @kul3r4