ポリマー-データシステム

ポリマーを使用すると、次のようなさまざまなアクションを実行することで、要素のプロパティの変化を観察できます。

Observers −データが変更されるたびにコールバックを呼び出します。
Computed Properties −他のプロパティに基づいて仮想プロパティを計算し、入力データが変更されるたびにそれらを再計算します。
Data Bindings −データが変更されるたびに、注釈を使用してDOMノードのプロパティ、属性、またはテキストコンテンツを更新します。

データパス

Pathはデータシステム内の文字列であり、スコープに関連するプロパティまたはサブプロパティを提供します。スコープはホスト要素にすることができます。パスは、データバインディングを使用してさまざまな要素にリンクできます。要素がデータバインディングに接続されている場合、データの変更をある要素から別の要素に移動できます。

例

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

<address-card>が<my-profile>要素のローカルDOMにある場合、上記の2つのパス（my-profileとaddress-card）はデータバインディングで接続できます。

以下は、Polymer.jsの特殊なタイプのパスセグメントです。

ワイルドカード（*）文字は、パスの最後のセグメントとして使用できます。
配列の変更は、パスの最後のセグメントとして文字列スプライスを配置することにより、特定の配列に表示できます。
配列アイテムパスは配列内のアイテムを示し、数値パスセグメントは配列インデックスを指定します。

データパスでは、各パスセグメントはプロパティ名であり、次の2種類のパスが含まれます-

ドットで区切られたパスセグメント。例：「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というファイルをもう1つ作成し、次のコードを追加します。

//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/。以下が出力になります。

ボタンをクリックすると、次のスクリーンショットに示すように値が変更されます。

2つのパスをリンクする

linkPathsメソッドを使用して2つのパスを同じオブジェクトにリンクでき、要素間の変更を生成するにはデータバインディングを使用する必要があります。

例

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

バインディングの左側はターゲットのプロパティまたは属性を指定し、バインディングの右側はバインディングアノテーションまたは複合バインディングのいずれかを指定します。バインディングアノテーションのテキストは、二重中括弧（{{}}）または二重角括弧（[[]]）区切り文字で囲まれ、複合バインディングには1つ以上の文字列リテラルバインディングアノテーションが含まれます。

以下は、データバインディングのユースケースで使用されるヘルパー要素です-

Template Repeater −テンプレートのコンテンツのインスタンスは、配列内のアイテムごとに作成できます。
Array Selector −構造化データの配列の選択状態を提供します。
Conditional Template −条件が真の場合、コンテンツを識別できます。
Auto-binding Template −ポリマー要素の外側のデータバインディングを指定します。

ヘルパー要素がDOMツリーを更新すると、DOMツリーはdom-changeイベントをトリガーします。場合によっては、作成されたノードを操作するのではなく、モデルデータを変更することでDOMを操作できます。したがって、dom-changeイベントを使用して、ノードに直接アクセスできます。