条件状态

简介

此代码段演示了如何创建具有条件的简单 amp-state。

设置

我们使用 amp-bind 创建动态 amp-state。

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

基本用法

charState 由 input 组件中的 AMP.setState 块设置。我们通过使用 input-throttled 来检查用户输入的 state 是否已更改。如果输入的 state 已更改，我们会检查输入中的当前字符数（event.value.length）。字符数决定了将设置的 charState。问号 ? 和冒号 : 之间的项目满足所述条件。冒号 : 后的项目适用于任何不满足所述条件的情况。可以在同一个 AMP.setState 块中设置多个条件。

当用户在 input 部分输入 < 10 个字符时，他们会看到消息“字符数少于 10 个，请多输入一些！”。

当用户在 input 部分输入 > 10 个字符时，他们会看到消息“您已输入超过 10 个字符，现在可以停止了。”。

尝试在文本框中输入一些字符。

<p [text]="charState">
  Try typing a few characters into the textbox.
</p>
<input type="textbox" on="input-throttled:AMP.setState({
        charState: event.value.length < 10 ?  
          'There are under 10 characters, type more!' : 
          'You have typed over 10 characters, you can stop now.'
        })">

需要进一步解释？

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

前往 Stack Overflow

一个未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的长期参与者，但也欢迎您针对您特别感兴趣的问题进行一次性贡献。

在 GitHub 上编辑示例

作者： @elisameyer