AMP教學-amp-bind 增加網頁互動
BY kate │
AMP由於限制JavaScript的關係，原本網頁常用的一些如點擊後替換class、替換文字、顏色，或是由A按鈕操作B物件等效果都不能使用原來的JavaScript(或jQuery) 製作。 因此amp-bind個元件專門來解決這件事情，可以應用的範圍非常廣泛，包含電子商務的購物頁面也需要仰賴此套件，將分為多篇教學來解說amp-bind。
amp-bind是透過數據綁定讓物件有互動效果的一個元件，例如選擇服裝顏色時價錢、尺寸跟著變動等；又或者輪播內需要點擊小圖後換圖。
元件使用方式
同樣先在<head>裡面放入執行的js
amp-bind是透過數據綁定讓物件有互動效果的一個元件，例如選擇服裝顏色時價錢、尺寸跟著變動等；又或者輪播內需要點擊小圖後換圖。
amp-bind中包含三種主要的組件:
- 狀態：例如按鈕被點擊前狀態為預設值，點擊後狀態被變更。
- 表達式：類似JavaScript表達式，可以引用狀態。一個表達式最多使用100個操作。
- 綁定：會使用類似[property]特殊屬性將元素關連到表達式上。例如[text]可以變更<p>裡面的文字
元件使用方式
同樣先在<head>裡面放入執行的js
| <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> |
透過amp-bind來改變屬性與值，利用 hidden 變更屬性，先隱藏Hello World 文字，按下按鈕使用 AMP.setState()操作來更新狀態(false )讓 hideGreeting內的文字顯示
|
<div> |
| [hidden] | 預先隱藏 hideGreeting 這個物件 |
| on | 觸發行為，點擊按鈕時觸發 |
| tap | 將物件合併到狀態中，其他還有change(改變)、... |
| AMP.setState() | 通過AMP.setState（）修改，另外還有AMP.pushState ( ) 增加改變值 |
| hideGreeting: false | hideGreeting為假的時顯示hideGreeting物件 |
當點選按鈕的時候，文字會變成"Hello amp-bind"
|
<p [text]="'Hello ' + foo">Hello World</p> <button on="tap:AMP.setState({foo: 'amp-bind'})">Say "Hello amp-bind"</button> |
<p>裡面的 [text]="'Hello ' + foo" 則代表 使用[text] 將替換文字，變成Hello+函式的文字(指foo: 'amp-bind') ，因此點擊按鈕後文字會從Hello World 變成Hello amp-bind
以上是初步的概念與使用方式，amp-bind還有另一個方式是使用Json將所有資訊都先寫在入，再根據json裡的資料改變實際呈現的樣子，將於之後一一說明
參考:
amp-bind 介紹
入門範例
