條件式狀態

簡介

此程式碼片段示範如何建立具有條件的簡單 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 來檢查使用者輸入的狀態是否已變更。如果輸入狀態已變更，我們會檢查目前輸入中的字元數 (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 撰寫