提升互動性

入門程式碼提供相當基本的使用者體驗。我們可以透過幾種方式來改善使用者體驗

新增一個指示器，顯示目前的投影片和投影片總數。
當使用者選取不同的襯衫顏色時，變更圖片輪播，以顯示所選顏色的襯衫圖片。

在導入 amp-bind 元件之前，新增像這樣的功能是不可能的。讓我們親身體驗 amp-bind，並將這些新功能新增至我們的範例程式碼！

安裝 `amp-bind` 元件

amp-bind 是一個 AMP 元件，可透過資料繫結和類似 JS 的運算式提供自訂互動性。若要使用 amp-bind，您必須將其安裝在頁面中。

開啟 static/index.html 檔案，並將下列指令碼新增至頁面 <head> 區段中 AMP 元件的清單

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

新增投影片指示器

amp-bind 的運作方式是將元素屬性繫結至自訂運算式。這些運算式可以參照「狀態」(可變 JSON 資料)。我們可以透過 <amp-state> 元件初始化此狀態，此元件隨附於 amp-bind。

初始化投影片狀態

讓我們初始化一個狀態變數，以追蹤圖片輪播中目前顯示的投影片索引。開啟 static/index.html，並將下列內容新增至頁面的 <body> 頂端 (<header> 之前)

<amp-state id="selected">
  <script type="application/json">
    {
      "slide": 0
    }
  </script>
</amp-state>

<amp-state> 元素中的資料可透過其相關聯的 ID 存取。例如，我們可以透過下列運算式片段參照此變數

selected.slide // Evaluates to 0.

更新投影片狀態

接下來，當使用者變更輪播上的投影片時，讓我們透過將下列 "on" 動作新增至現有的 amp-carousel 元素來更新此變數

<amp-carousel type="slides" layout="fixed-height" height=250 id="carousel"
    on="slideChange:AMP.setState({selected: {slide: event.index}})">

現在，每當 amp-carousel 的顯示投影片變更時，系統就會使用下列引數呼叫 AMP.setState 動作

{
  selected: {
    slide: event.index
  }
}

event.index 運算式會評估為新的投影片索引，而 AMP.setState() 動作會將此物件常值合併至目前狀態。這會將 selected.slide 的目前值取代為 event.index 的值。

提示 – AMP.setState() 會對巢狀物件常值執行深度合併。如需更多詳細資訊，請參閱 amp-bind 文件。

繫結指示器元素

接下來，讓我們使用此狀態變數 (追蹤目前顯示的投影片) 並建立投影片指示器。尋找投影片指示器元素 (尋找 )，並將下列繫結新增至其子項

<!-- TODO: "Add a slide indicator" -->
<p class="dots">
  <!-- The <span> element corresponding to the current displayed slide
       will have the 'current' CSS class. -->
  <span [class]="selected.slide == 0 ? 'current' : ''" class="current"></span>
  <span [class]="selected.slide == 1 ? 'current' : ''"></span>
  <span [class]="selected.slide == 2 ? 'current' : ''"></span>
</p>

[class] 是一種繫結，可變更 class 屬性，您可以使用它來新增或移除任何元素的 CSS 類別。

試試看：重新整理頁面並變更投影片！

透過變更輪播上的投影片，它會

觸發 slideChange 事件...
進而呼叫 AMP.setState 動作...
進而更新狀態變數 selected.slide...
進而更新指示器 <span> 元素上的 [class] 繫結！

太棒了！現在我們有一個可運作的投影片指示器。

看看您是否可以新增功能，讓使用者輕觸投影片的指示點時，它會使用選取的項目更新圖片輪播。提示：在 amp-carousel 上使用 tap 事件和 [slide] 繫結。

變更輪播中的圖片

如果我們可以在變更選取的顏色時看到不同襯衫顏色的圖片，那就太好了。使用 amp-bind，我們可以透過在 amp-carousel 內的 amp-img 元素上繫結 [src] 來達成此目的。

初始化 SKU 狀態

首先，我們需要使用每種顏色襯衫的圖片來源網址初始化狀態資料。讓我們使用新的 <amp-state> 元素來執行此操作

<!-- Available shirts. Maps unique string identifier to color and image URL string. -->
<amp-state id="shirts">
  <script type="application/json">
    {
      "1001": {
        "color": "black",
        "image": "./shirts/black.jpg"
      },
      "1002": {
        "color": "blue",
        "image": "./shirts/blue.jpg"
      },
      "1010": {
        "color": "brown",
        "image": "./shirts/brown.jpg"
      },
      "1014": {
        "color": "dark green",
        "image": "./shirts/dark-green.jpg"
      },
      "1015": {
        "color": "gray",
        "image": "./shirts/gray.jpg"
      },
      "1016": {
        "color": "light gray",
        "image": "./shirts/light-gray.jpg"
      },
      "1021": {
        "color": "navy",
        "image": "./shirts/navy.jpg"
      },
      "1030": {
        "color": "wine",
        "image": "./shirts/wine.jpg"
      }
    }
  </script>
</amp-state>

此 <amp-state> 元素包含一個 JSON 物件，該物件會將襯衫識別字串 (即 SKU) 對應至對應襯衫的顏色和圖片網址。JSON 陣列在這裡也適用，但使用物件可讓我們執行一些更酷的功能，您很快就會看到。

現在我們可以透過襯衫的識別碼存取圖片網址。例如，shirts['10014'].color 會評估為 "dark green"，而 shirts['10030'].image 則會傳回 "wine" 襯衫顏色的圖片網址。

追蹤所選 SKU

如果我們新增另一個追蹤所選 SKU 的狀態變數，我們可以將運算式繫結至 amp-img 元素，以便在所選 SKU 變更時更新其 src 屬性。將新的 sku 金鑰新增至現有的 amp-state#selected 元素的 JSON

<amp-state id="selected">
  <script type="application/json">
    {
      "slide": 0,
      "sku": "1001"
    }
  </script>
</amp-state>

更新 SKU 狀態

將 "on" 動作新增至 amp-selector，每當選取新顏色時，該動作就會更新 selected.sku 變數

<amp-selector name="color"
    on="select:AMP.setState({selected: {sku: event.targetOption}})">

提示 – 這也可以透過將 on="tap:AMP.setState(...) 動作新增至 amp-selector 內部的每個 amp-img 子項來完成。關於 amp-selector 最棒的功能之一是，它透過這樣的方式簡化了標記。

繫結圖片元素

然後，將繫結新增至 amp-img

<!-- Update the `src` of each <amp-img> when the `selected.sku` variable changes. -->
<amp-img width=200 height=250 src="./shirts/black.jpg"
    [src]="shirts[selected.sku].image"></amp-img>
<amp-img width=300 height=375 src="./shirts/black.jpg"
    [src]="shirts[selected.sku].image"></amp-img>
<amp-img width=400 height=500 src="./shirts/black.jpg"
    [src]="shirts[selected.sku].image"></amp-img>

注意 – 實際上，輪播中的每張圖片可能都有不同的 src。這可以透過將單一圖片替換為圖片陣列來完成。為了簡單起見，本教學課程使用不同放大倍率的單一圖片。

試試看：重新整理頁面並選取襯衫的不同顏色。當您執行此操作時，輪播的圖片會更新以顯示所選顏色的襯衫。