關於資料綁定這檔事 — Part2

在第一篇裡，我們稍微介紹了一下基本版的 Polymer 資料綁定(Data binding)，主要講的都是如何顯示變數值，但還沒講要怎麼更改變數。

我們先拿之前出現過最簡單的 self-introduction 來說好了。本來只會顯示固定的變數數值，現在我們想依據一個隨機數值來顯示不同的名字，程式碼如下：

結果如下：

沒錯！就是這麼簡單，只要像一般更改 javascript 變數一樣更新數值，剩下的 framework 會自動幫你處理。

覺得太簡單了嗎？那我們來看另一個常見的使用情境：依據使用者的輸入來更新變數。

出來結果：

在這個例子我們雖然用了官方的 paper-input 來取代原有的 <input> ，但基本用法上大同小異。

可以很明顯地看到顯示的變數隨著輸入的值即時更新，跟前一個範例不同的就是在輸入部分，我們是用 {{name}} 以及 {{age}} 來接收變數的值，或著更精確的說，「雙方向綁定」。有雙方向那一定有單方向吧？是的，用 [[name]] ，兩個中括號來標示變數顯示位置的方法就是單方向的綁定：變數在其他地方的更動，會顯示在 [[name]] 的地方，但如果更動是發生在 [[name]] 這個地方，那 name 的變數值就不會更新。

拿上面的 paper-input 當例子好了， paper-input 的 value 屬性會不斷輸出現在使用者輸入的東西，但如果今天這樣寫：

<paper-input value="[[name]]"></paper-input>

value 的值就無法從 paper-input 裡面輸出出去，因為兩個中括號只能單方向地、從變數「推送」到綁定的地方，而無法從另一個方向，把數值從綁定的地方推送回變數。所以由此可猜到，兩個大括號， {{name}}，在 paper-input 的例子中，就可以成功地把它的 value 值推送給 name 變數。

另外如果你不想某些定義於 properties 的變數在元素被使用時被更改，那可以加上 readOnly 來設定。

properties:{
   name: {
    type: String,
    value: 'Mary',
    readOnly: true
   }
}

這樣不管別人在使用時怎麼設定 name ：

<self-introduction name="Ruby"></self-introduction>

name 的值永遠都是 Mary。

另外關於 properties與變數，有幾點需要補充。大家到這邊可能會有一個疑惑：是不是每個變數都要在 properties 裡面，做類似變數宣告的動作才能使用呢？嘛…雖然小編 Java 和 C++ 寫得比 JS 久所以也比較習慣變數宣告但很慶幸的，在這邊不用這樣做。

我們現在可是在 JS 的世界啊！變數是動態的， properties 只是標示了裡面含有的變數是可以做為 HTML tag 的屬性值。那如果想要在這個元素初始化時，就初始化一些變數呢？可以用此頁第一個範例出現過的 ready 函數。 ready 函數就如其名，會在這個元素初始化完成後被呼叫，因此就可以在裡面為一些會使用到的變數初始化其數值。 ready 函數其實跟一個非常重要的概念：元素的生命週期有關，我們往後會更詳細的介紹。

下一篇是這個系列最後一篇，我們會介紹如何從外面監聽變數更新的事件，一些在更新變數時需注意的事項，以及一些較為輔助性質的功能。敬請期待：）