使用 amp-bind 處理 view 、 data 、 user event 間的關係

相信不少人都有用過 MVP 、 MVC 、 MVVM, ... 各種架構，便於我們綁定 view 、 data 、 處理 user event；現在，在 AMP 的世界裡，請用 amp-bind 這個 component 來做這樣的處理

Required Script

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

基本的三部分

State

基本設定

槽狀使用 <amp-state> 與 <script type="application/json"> ，在裡面用 JSON 格式做一些設定。

修改 state 資料

在節點的 event 時，請使用 AMP.setState() 或 AMP.pushState() ， 並會對 state 做 deep-merge

例：

• <button on="tap:AMP.setState({foo: 'bar', baz: myAmpState.someVariable})"></button>

• <input type="range" on="change:AMP.setState({myRangeValue: event.value})">

• <button on="tap:AMP.pushState({foo: '123'})">Set 'foo' to 123</button>

而 AMP.pushState() 同時還會修改頁面的 browser history stack

debug state

AMP.printState()

Expressions

使用類似 JavaScript 的表達式來對照這些 state 。

• 只可操作 state ，並沒有權限影響 globals 的 window 或 document

• 可使用的白名單 function

• 通常並不允許使用客製的 function 、 class 、loops 。 Arrow functions 是可被允許做為 parameters 使畢的。例如： Array.prototype.map

• 未定義的變數或不存在的array變數值（array-index-out-of-bounds），會回傳 null ，而非 undefined ， 也不會 throw errors

完整的 Expressions 相關程式，請看 bind-expr-impl.jison 與 bind-expression.js

Bindings

使用在節點上的 property 來包住變數做綁定；例： [src]="myAnimals[currentAnimal].imageUrl" 、 [class]="shirts[selected.sku].sizes['XS'] ? '' : 'unavailable'"

請注意，什麼節點或 compent 上能如何使用，是有官方規定的

下面為範例：

<!-- Store complex nested JSON data in <amp-state> elements. -->
<amp-state id="myAnimals">
  <script type="application/json">
    {
      "dog": {
        "imageUrl": "/img/dog.jpg",
        "style": "greenBackground"
      },
      "cat": {
        "imageUrl": "/img/cat.jpg",
        "style": "redBackground"
      }
    }
  </script>
</amp-state>

<p [text]="'This is a ' + currentAnimal + '.'">This is a dog.</p>

<!-- CSS classes can also be added or removed with [class]. -->
<p class="greenBackground" [class]="myAnimals[currentAnimal].style">
  Each animal has a different background color.
</p>

<!-- Or change an image's src with the [src] binding. -->
<amp-img width="300" height="200" src="/img/dog.jpg"
    [src]="myAnimals[currentAnimal].imageUrl">
</amp-img>

<button on="tap:AMP.setState({currentAnimal: 'cat'})">Set to Cat</button>

注意：<amp-bind> 並不會在頁面讀取時動作，它只會在 user 於頁面上執行動作時才會執行；這是為了確保無論頁面有無使用 <amp-bind> ，都能快速完成初始網頁。

• 官方網站
• 官方網站
• 官方網站