使用者互動後的動態內容

簡介

這是一個範例，示範如何在使用者互動後顯示動態內容：產品的供應情況將根據產品選擇顯示。

設定

我們使用 amp-bind 來動態更新頁面內容。

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

如何取得動態內容

透過搭配 JSON 端點使用 amp-bind 和 amp-state，使用者可以在互動後取得最新的資料。由於 amp-bind 陳述式不會在頁面載入時評估，因此更新後的狀態僅在使用者互動後可用，這對於特定產品供應情況等使用案例非常適用。

請選擇產品

<amp-state id="products" src="/static/samples/json/products.json"></amp-state>

<amp-img on="tap:AMP.setState({ productId: 0})" src="/static/samples/img/red_apple_1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<amp-img on="tap:AMP.setState({ productId: 1})" src="/static/samples/img/green_apple_1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<amp-img on="tap:AMP.setState({ productId: 2})" src="/static/samples/img/product1_alt1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<div [text]="products[productId] + ' available'">Please select a product</div>

需要更多說明嗎？

如果此頁面上的說明未能涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的具體使用案例。

前往 Stack Overflow

有未說明的特性嗎？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別熱衷的問題做出一次性的貢獻。

在 GitHub 上編輯範例

由 @kul3r4 撰寫