amp-bind
- Introduction Setup Basic usage Binding text Binding CSS classes Binding width and height Hiding & showing Initializing state Remote state Refresh state Push State Debounce input events 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>

防反跳輸入事件

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

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