[Polymer 筆記] 2. 綁定

6 min readOct 18, 2019

承上篇建立專案後，這篇要介紹幾種在 Polymer 的綁定方式。

一般來說在許多框架都提供了資料綁定的作法，在 Polymer 也有類似的綁定方式，不過在 Polymer 處理資料綁定時，要注意在綁定原生 property 或 attribute 時語法有稍微的不同。

1. 單向綁定

// 綁定property
<xxx-element property="[[prop]]"></xxx-element>

單向綁定使用的符號是中括號，只要偵測到 properties 的內容改變時會改變 Shadow DOM 內的內容。在 myproj-app.js 中所使用的即是單向綁定。

2. 雙向綁定

// 綁定property
<xxx-element property="{{prop}}"></xxx-element>

雙向綁定使用的符號為大括號，若被綁定的 Property 改變時，原本的 Property 也會跟著改變。

3. Attribute綁定

//單向綁定
<xxx-element attribute$="[[prop]]"></xxx-element>//雙向綁定
<xxx-element attribute$="{{prop}}"></xxx-element>

在綁定時會碰到在 Polymer 可能不支援 property binding 的 attribute （如：href，src，style），這時可能要使用上面這個語法進行綁定。

關於 attribute 與 property 的差異有時候會有些混肴，如果還不清楚的話建議可以先了解下這兩者的差異。

4. 原生元素的 property 的雙向綁定

// 原生元素 input的value進行雙向綁定
<input type="text" value="{{prop::changed}}"></input>

若在原生的元素上使用雙向綁定時會發現沒有效果，這時要使用的上面的這個語法。

5. on-event事件綁定

// on-event事件綁定，以click事件綁定clear function為例
<button on-click="clear">clear</button>

在元件上使用的語法可以將成員函數綁定到特定事件。

例子

讓我們用一個例子來了解下吧，首先先建立一個 polymer 元素 user-view.js：

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js'/**
 * @customElement
 * @polymer
 */
class UserView extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>
      <div>
        userName: [[userName]]
      </div>
      <div>
        mail: [[mail]]
      </div>
      <!-- on-event事件綁定 -->
      <button on-click="clear">clear</button>
    `
  }
  static get properties() {
    return {
      userName: {
        type: String,
        value: ''
      },
      mail: {
        type: String,
        value: ''
      }
    }
  }
  clear() {
    this.userName = ''
    this.mail = ''
  }
}window.customElements.define('user-view', UserView)

對 myproj-app 稍做修改：

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js'
import './user-view'
/**
 * @customElement
 * @polymer
 */
class MyprojApp extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>      <!-- 單向綁定 -->
      <h2>Hello [[prop1]]!</h2>      <!-- Polymer property綁定-->
      <!-- 在綁定時原本lower camel case要改為kebab Case-->
      <user-view 
        user-name="John"
        mail="[[userMail]]">
      </user-view>      <p></p>
      <div>        <!-- attribute綁定 -->
        <span style$="color:[[color]];">mail:</span>        <!-- 原生元素的property雙向綁定 -->
        <input type="text" value="{{userMail::change}}">      </div>
    `
  }
  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'myproj-app'
      },
      color: {
        type: String,
        value: 'green'
      },
      userMail: {
        type: String,
        value: 'user@test.com'
      } 
    }
  }
}window.customElements.define('myproj-app', MyprojApp)

這下在例子中就能看到當我們修改 input 裡的內容後 mail 之後的文字也跟著改變了。

不過我特地先打了一個 clear 的按鈕，按下後雖然改變了 user-view 裡的內容，卻沒有跟著更新 myproj-app 裡的 userMail，input 裡的值也沒被清掉，當然因為這只是單向綁定。

那麼 polymer 組件的雙向綁定怎麼做呢？

上面的例子中，因為 mail 的部分只是單向綁定，所以當我們按下 clear 的時，input的值並沒有被跟著消掉。要改為雙向綁定只要做幾個小小的修改：

將 myproj-app.js 裡的中括號改為大括號

<user-view
  user-name="John"
  mail="{{userMail}}">
</user-view>

將 user-view.js 裡的 property 加上 notify:true。

mail: {
  type: String,
  value: '',
  notify: true
}

這次就能看到當 clear 按下時 input 裡的內容也被清除了。