AMP
  • websites

Conditional State

Introduction

This snippet demonstrates how to create a simple amp-state with conditions.

Setup

We use amp-bind to create a dynamic amp-state.

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

Basic usage

The charState is set by theAMP.setState block in the input component. We check whether the state of user input has changed by using input-throttled. If the state of input has changed, we check current the number of characters in the input (event.value.length) is. The number of characters determines what charState will be set. The item between the ? question mark and the : colon meets the stated condition. The item after the : colon is given for anything that does not meet the stated condition. It is possible to have multiple conditions within the same AMP.setState block.

When a user types < 10 characters in the input section, they see the message "There are under 10 characters, type more!".

When a user types > 10 characters in the input section, they see the message "You have typed over 10 characters, you can stop now.".

Try typing a few characters into the textbox.

<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.'
        })">
Precisa de explicações mais detalhadas?

Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.

Ir para o Stack Overflow
Falta explicar algum recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Editar amostra no GitHub