amp-bind
- 簡介設定基本用法綁定文字綁定 CSS 類別綁定寬度和高度隱藏與顯示初始化狀態遠端狀態重新整理狀態推送狀態 Debounce 輸入事件 amp-bind-macro

網站

amp-bind

簡介

amp-bind 讓您除了使用 AMP 預先建立的元件外，還能為您的網頁新增自訂互動功能。

設定

在標頭中匯入 amp-bind 元件。

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

基本用法

透過 amp-bind，您可以透過綁定更新元素屬性和值。在這裡，我們根據名為 hideGreeting 的狀態變數更新 hidden 屬性。在按下按鈕時，我們使用 AMP.setState() 動作來更新狀態。

<div hidden [hidden]="hideGreeting">Hello World</div>
<button on="tap:AMP.setState({ hideGreeting: false })">Show greeting</button>

綁定文字

您可以透過宣告綁定到 [text] 屬性，動態變更元素的文字值。

Hello World

<div>Hello <span [text]="myText">World</span></div>
<button on="tap:AMP.setState({ myText: 'AMP' })">Change text</button>

綁定 CSS 類別

您可以透過新增綁定到 [class] 屬性，動態變更元素的 CSS 類別。

Hello World

<div class="background-red" [class]="myClass">Hello World</div>
<button on="tap:AMP.setState({ myClass: 'background-green' })">Change class</button>

綁定寬度和高度

基本元素屬性 (例如 width 和 height) 也可以更新。

<amp-img src="https://unsplash.it/400/200" width="200" [width]="myImageDimension.width" height="100" [height]="myImageDimension.height">
</amp-img>
<button on="tap:AMP.setState({
                  myImageDimension: {
                    width: 400,
                    height: 200
                  }
                })">
  Change size
</button>

隱藏與顯示

此範例根據輸入選項切換兩個 div 的可見性。AMP 提供 hidden 屬性，我們使用此屬性來隱藏和顯示這兩個 div。某些元素 (例如 select 元素) 會觸發事件，我們可以利用這些事件來更新狀態。

<select on="change:AMP.setState({ option: event.value })">
  <option value="0">No selection</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>
<div hidden [hidden]="option != 1">
  Option 1
</div>
<div hidden [hidden]="option != 2">
  Option 2
</div>

初始化狀態

amp-state 變數的初始值為 null。但是，綁定不會在網頁載入時評估，而是在後續使用者動作時評估。如果 amp-state 變數未正確初始化，可能會導致不必要的副作用。

在此範例中，兩個問候語都綁定到不同的 amp-state 變數。其中一個是透過 amp-state 元素內的 JSON 字串初始化，另一個則否。當使用者觸發 AMP.setState(...) 動作時，將會評估兩個綁定，導致第一個綁定顯示 null 值。

1. Hello World

2. Hello World

<amp-state id="myInitText"><script type="application/json"> "World" </script></amp-state>
  <div>1. Hello <span [text]="undefinedText">World</span></div>
  <div>2. Hello <span [text]="myInitText">World</span></div>
  <button on="tap:AMP.setState({ myInitText: 'AMP' })">Change state</button>

遠端狀態

amp-state 元素可以使用 src 屬性從遠端 JSON 端點提取狀態。在這裡，我們將 amp-list 的 [src] 屬性綁定到 JSON 端點傳回的 amp-state 資料。另請注意我們如何根據元素數量計算 amp-list 的 [height]。按鈕會觸發空的 AMP.setState() 動作，以觸發 amp-bind 運算式進行評估。如果您在範例中看不到預留位置項目，表示 amp-state 已經過評估。請重新整理網頁以查看實際範例。

<amp-state id="placeholderState">
  <script type="application/json">
    {"items": [{"url": "#", "title": "Placeholder1"},{"url": "#", "title": "Placeholder2"}]}
  </script>
</amp-state>
<amp-state id="myRemoteState" src="/static/samples/json/websites.json"></amp-state>
<amp-list layout="fixed-height" height="44" [height]="22 * myRemoteState.items.length" src="amp-state:placeholderState" [src]="myRemoteState.items" binding="no">
  <template type="amp-mustache">
    <div><a href="{{url}}">{{title}}</a></div>
  </template>
</amp-list>
<button on="tap:AMP.setState({})">Show websites</button>

重新整理狀態

amp-state 支援 refresh 動作。這在許多情況下都很有用，例如，初始網址載入失敗，而您希望使用者再次載入狀態。另一個常見情境是需要更新的即時內容，例如體育賽事即時比分。如需完整的動作清單，請參閱此處。按一下下方的按鈕將會重新整理並重新擷取 amp-state 中的 json，顯示更新的時間。

00:00:00

<amp-state id="currentTime" src="/documentation/examples/api/time"></amp-state>
<button on="tap:currentTime.refresh">
  Refresh
</button>
<div [text]="currentTime.time">00:00:00</div>

推送狀態

AMP.pushState() 將狀態變更寫入歷程記錄。返回瀏覽將還原先前的狀態。若要測試此功能，請增加計數並使用瀏覽器的返回按鈕來減少計數。

項目 1

<amp-state id="count"><script type="application/json">1</script></amp-state>
  <div>Item <span [text]="count">1</span></div>
  <button on="tap:AMP.pushState({ count: count + 1 })">Increase count</button>

Debounce 輸入事件

對於文字輸入，建議使用 input-throttled 事件來 debounce 輸入。如需更深入的範例，請參閱自動建議。

Hello ?

<amp-state id="name"><script type="application/json"> "?" </script></amp-state>
  <input id="name-input" placeholder="Enter a name" on="input-throttled:AMP.setState({ name: event.value })">
  <div>Hello <span [text]="name">?</span></div>

amp-bind-macro

amp-bind-macro 讓您可以在不同的動作中重複使用運算式。

圓形的面積為 0。

<amp-bind-macro id="circleArea" arguments="radius" expression="3.14 * radius * radius">
  <input type="number" min="0" max="100" value="0" on="input-throttled:AMP.setState({ radius: event.value })">
  <div>
    The circle has an area of <span [text]="circleArea(radius)">0</span>.
  </div>

需要更多說明嗎？

如果本頁的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別熱衷的問題做出一次性貢獻。

在 GitHub 上編輯範例

由 @choumx 撰寫