• 网站

条件状态

引言

此代码片段演示了如何创建具有条件的简单 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.'
        })">

• 由 @elisameyer 撰写