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.'
        })">
Besoin de plus amples explications ?

Si les explications de cette page ne répondent pas à vos questions, n'hésitez pas à contacter d'autres utilisateurs d'AMP pour discuter de votre cas d'utilisation spécifique.

Se rendre sur Stack Overflow
Une fonctionnalité n'a pas encore été expliquée ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Modifier l'exemple sur GitHub