Polymer Data System

Polymer facilitates you to change in element's properties by taking various actions based on data changes. These actions are:

Observers: It is used to invoke the callbacks whenever the data changes.

Computed Properties: It is used to compute the virtual properties based on other properties. It also re-computes them whenever the input data changes.

Data Bindings: It is used to update the properties, attributes, or the text content of a DOM node using annotations whenever the data changes.

Data Paths

Path is a string in data system which is used to provide a property or a sub-property relative to a scope, where scope can be a host element.

Data binding is a technique which is used to link paths to different elements. You can change data from one element to another, if the elements are connected with data binding.

Example

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

In the above example, you can see that there are two paths (my-name and address-card) are connected with data binding where <address-card> is in the local DOM of the <my-name> element.

Path Segments in Polymer.js

Following is a list of special types of path segments in Polymer.js:

You can use wild card (*) character as the last segment in a path.
You can display the array mutations to a given array by placing string splices as the last segment in a path.
Array item path specifies an item in an array and the numeric path segment specifies an array index.

In a Data path, path segment is a property name and it includes two types of paths:

The path segments separated by dots. For example: "apple.grapes.orange".
In an array of strings, each array element is either a path segment or a dotted path. For example: ["apple","grapes","orange"], ["apple.grapes","orange"].

Data Flow

Let's take an example to see two-way binding of data flow. Create a file named index.html and use the following code in it.

<!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>

Create another file named my-element.html and use the following code.

<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>

Now, create one more file named prop-element.html and use the following code:

//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>

Output:

Click the button and you can see the change in the value:

Linking Two Paths

Use linkPaths() method to link the two path to the same objects. You need to use data binding to generate changes between the elements.

Example

The path linkage can be removed using the unlinkPaths method as shown below:

Observers

The observers are the changes that occur to the element's data invoke methods. Following are the types of observers.

Simple observers are used to observe a single property.
Complex observers are used to observe more than one property or path.

Data Binding

Data binding is used to connect the property or an attribute of an element from the host element in its local DOM.

Data binding can be created by adding annotations to DOM template like this:

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

The anatomy of data binding in the local DOM template:

The left-hand side of the binding specifies the target property or attribute, while the righthand side of the binding specifies either a binding annotation or a compound binding. The text in binding annotation are enclosed by double curly bracket ({{ }}) or double square bracket ([[ ]]) delimiters and the compound binding includes one or more string literal binding annotations.

Following are the helper elements, which are used with data binding use cases -

Template Repeater: An instance of the template's contents can be created for each item in an array.

Array Selector: It provides the selection state for an array of structured data.

Conditional Template: You can identify the content, if the condition is true.

Auto-binding Template: It specifies the data binding outside of polymer element.

The DOM tree triggers a dom-change event, if the helper elements update the DOM tree. Sometimes, you can interact with DOM by changing the model data, not by interacting with the created nodes. Therefore, you can use the dom-change event to access the nodes directly.

Next TopicPolymer Tools

← prev next →