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

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

オブザーバー-データが変更されるたびにコールバックを呼び出します。
計算されたプロパティ-他のプロパティに基づいて仮想プロパティを計算し、入力データが変更されるたびにそれらを再計算します。
データバインディング-データが変更されるたびにアノテーションを使用して、DOMノードのプロパティ、属性、またはテキストコンテンツを更新します。

データパス

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

例

<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"]。

データフロー

例

次の例では、データフローの双方向バインディングを指定しています。 indexlファイルを作成し、その中に次のコードを追加します。

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

   <body>
      <my-element></my-element>
   </body>
</html>

次に、my-elementlという名前の別のファイルを作成し、次のコードを含めます。

<link rel = "import" href = "bower_components/polymer/polymer-elementl">
<link rel = "import" href = "prop-elementl">

//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-elementlというファイルをもう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

or

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

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

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

テンプレートリピーター-テンプレートのコンテンツのインスタンスは、配列内の各アイテムに対して作成できます。
Array Selector -構造化データの配列の選択状態を提供します。
条件付きテンプレート-条件が真の場合、コンテンツを識別できます。
自動バインディングテンプレート-ポリマー要素の外部のデータバインディングを指定します。

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

Polymer-data-system

目次