使用者互動後的動態內容

簡介

此範例展示如何在使用者互動後顯示動態內容：產品供應狀況將根據產品選擇顯示。

設定

我們使用 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