Polymer - 資料系統

Polymer 允許透過採取不同的操作來觀察元素屬性的變化，例如：

觀察者 - 資料更改時呼叫回撥函式。
計算屬性 - 基於其他屬性計算虛擬屬性，並在輸入資料更改時重新計算它們。
資料繫結 - 資料更改時，使用註釋更新 DOM 節點的屬性、特性或文字內容。

資料路徑

路徑是資料系統中的一個字串，它提供了相對於作用域的屬性或子屬性。作用域可以是宿主元素。路徑可以透過資料繫結連結到不同的元素。如果元素透過資料繫結連線，則資料更改可以從一個元素移動到另一個元素。

示例

<dom-module id = "my-profile">
   <template>
      . . .
      <address-card address="{{myAddress}}"></address-card>
   </template>
   . . .
</dom-module>

如果 <address-card> 位於 <my-profile> 元素的本地 DOM 中，則上述兩個路徑（my-profile 和 address-card）可以透過資料繫結連線。

以下是 Polymer.js 中特殊型別的路徑段：

萬用字元 (*) 字元可以用作路徑中的最後一個段。
可以透過將字串拼接作為路徑中的最後一個段，將陣列突變顯示到給定陣列。
陣列項路徑指示陣列中的一個項，數字路徑段指定陣列索引。

在資料路徑中，每個路徑段都是一個屬性名稱，它們包含以下兩種路徑：

由點分隔的路徑段。例如：“apple.grapes.orange”。
在字串陣列中，每個陣列元素要麼是路徑段，要麼是點路徑。例如：["apple","grapes","orange"], ["apple.grapes","orange"]。

資料流

示例

以下示例指定了資料流的雙向繫結。建立一個 index.html 檔案並在其中新增以下程式碼。

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "my-element.html">
   </head>
   
   <body>
      <my-element></my-element>
   </body>
</html>

現在建立一個名為 my-element.html 的檔案幷包含以下程式碼。

<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<link rel = "import" href = "prop-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "my-element">
   <template>
      <prop-element my-prop="{{demoProp}}"></prop-element>
      <p>
         Present value: <span>{{demoProp}}</span>
      </p>
   </template>
   
   <script>
      Polymer ({
         is: "my-element", properties: {
            demoProp: String
         }
      });
   </script>
</dom-module>

接下來，建立一個名為 prop-element.html 的檔案並新增以下程式碼。

//it specifies the start of an element's local DOM
<dom-module id = "prop-element">
   <template>
      <button on-click = "onClickFunc">Change value</button>
   </template>
   
   <script>
      Polymer ({
         is: "prop-element", properties: {
            myProp: {
               type: String,
               notify: true,
               readOnly: true,
               value: 'This is initial value...'
            }
         },
         onClickFunc: function(){
            this._setMyProp('This is new value after clicking the button...');
         }
      });
   </script>
</dom-module>

輸出

如前幾章所示執行應用程式，並導航到 http://127.0.0.1:8081/。以下是輸出。

單擊按鈕後，它將更改值，如下面的螢幕截圖所示。

連結兩個路徑

您可以使用 linkPaths 方法將兩個路徑連結到同一物件，並且需要使用資料繫結來生成元素之間的更改。

示例

linkPaths('myTeam', 'players.5');

可以使用 unlinkPaths 方法刪除路徑連結，如下所示：

unlinkPaths('myTeam');

觀察者

發生在元素資料上的可觀察更改會呼叫稱為觀察者的方法。以下是觀察者的型別。

簡單觀察者用於觀察單個屬性。
複雜觀察者用於觀察多個屬性或路徑。

資料繫結

資料繫結可用於連線宿主元素在其本地 DOM 中的元素的屬性或特性。可以透過向 DOM 模板添加註釋來建立資料繫結，如下面的程式碼所示。

<dom-module id = "myhost-element">
   <template>
      <target-element target-property = "{{myhostProperty}}"></target-element>
   </template>
</dom-module>

本地 DOM 模板中資料繫結的結構如下所示：

property-name=annotation-or-compound-binding

或

attribute-name$=annotation-or-compound-binding

繫結的左側指定目標屬性或特性，而繫結的右側指定繫結註釋或複合繫結。繫結註釋中的文字用雙花括號（{{ }}）或雙方括號（[[ ]]）分隔符括起來，複合繫結包括一個或多個字串文字繫結註釋。

以下是與資料繫結用例一起使用的輔助元素：

模板重複器 - 可以為陣列中的每個專案建立模板內容的例項。
陣列選擇器 - 它為結構化資料的陣列提供選擇狀態。
條件模板 - 如果條件為真，則可以識別內容。
自動繫結模板 - 它指定 Polymer 元素外部的資料繫結。

如果輔助元素更新 DOM 樹，則 DOM 樹會觸發 dom-change 事件。有時，您可以透過更改模型資料與 DOM 互動，而不是透過與建立的節點互動。因此，您可以使用 dom-change 事件直接訪問節點。

列印頁面