提升互動性

範例起始程式碼提供的使用者體驗相當簡陋。我們可以透過幾種方式來改善它

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

在 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-bind 隨附的 <amp-state> 元件來初始化此狀態。

初始化投影片狀態

讓我們初始化一個狀態變數，以追蹤圖片輪播中目前顯示的投影片索引。開啟 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 event 事件 ...
這會呼叫 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。這可以透過將單一圖片取代為圖片陣列來完成。為了簡化，本教學課程使用不同放大倍率的單一圖片。

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