AMP教學-amp-bind 增加網頁互動

AMP教學-amp-bind 增加網頁互動
AMP由於限制JavaScript的關係,原本網頁常用的一些如點擊後替換class、替換文字、顏色,或是由A按鈕操作B物件等效果都不能使用原來的JavaScript(或jQuery) 製作。 因此amp-bind個元件專門來解決這件事情,可以應用的範圍非常廣泛,包含電子商務的購物頁面也需要仰賴此套件,將分為多篇教學來解說amp-bind。

amp-bind是透過數據綁定讓物件有互動效果的一個元件,例如選擇服裝顏色時價錢、尺寸跟著變動等;又或者輪播內需要點擊小圖後換圖。

amp-bind中包含三種主要的組件:

  1. 狀態:例如按鈕被點擊前狀態為預設值,點擊後狀態被變更。
  2. 表達式:類似JavaScript表達式,可以引用狀態。一個表達式最多使用100個操作。
  3. 綁定:會使用類似[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>
<div hidden
[hidden]="hideGreeting">Hello World</div>
<button on="tap:AMP.setState({ hideGreeting: false })">Show greeting</button>
</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>

按鈕裡面寫著 tap:AMP.setState({foo: 'amp-bind'}) 代表將foo(範例的函式名稱,此處名稱可以自行命名) 帶入"amp-bind"文字;
<p>裡面的 [text]="'Hello ' + foo" 則代表 使用[text] 將替換文字,變成Hello+函式的文字(指foo: 'amp-bind') ,因此點擊按鈕後文字會從Hello World 變成Hello amp-bind

以上是初步的概念與使用方式,amp-bind還有另一個方式是使用Json將所有資訊都先寫在入,再根據json裡的資料改變實際呈現的樣子,將於之後一一說明

參考:
amp-bind 介紹
入門範例
 

更多文章:

  1. AMP教學-amp-bind-產品輪播圖與規格互動
  2. AMP教學-amp-bind-產品規格製作教學
  3. 在AMP中添加或刪除class的方式
  4. 每個AMP頁面都必須有非AMP版本嗎?
  5. AMP頁面只適合使用在靜態網站上面嗎?

回應