Understanding two-way databinding in Polymer

Question

I'm new to polymer, and I've been reading the docs and playing around with it a little bit, but I'm having some difficulty understanding the difference between the [[]] one way data flow, and the {{}} two way data flow.

Can anyone help me understand the difference?

Answer 1

For example handing data from one element down to one of it's child elements is considered one-way-data-binding. If this data get's modified in the child element the change is also reflected in the parent. This is made possible through a two-way-data-binding as it can go in both directions up and down.

Below I have added two code examples.
The first illustrates one-away-data-binding between two elements. The second example shows two-way-data-binding where the parent element reflects a change that happened in it's child.

Please note that I am using the syntax of Polymer 1. However, I believe the way data-binding is handled in Polymer 2 hasn't changed.


One-way-data-binding
Parent Element

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../child-element/child-element.html">
<dom-module id="parent-element">
  <template>
    <style>
    </style>
    <div>
      <h1>[[name]]</h1> <!-- This will print Pazzle -->

      <!-- Use the imported child element and bind the name property-->
      <child-element name="[[name]]"></child-element>
      <!-- Will print Pazzle in a h2 element -->

    </div>
  </template>
  <script>
    Polymer({
      is: 'parent-element',
      properties: {
        name: {
          type: String,
          value: 'Pazzle'
        }
      },
    });
  </script>
</dom-module>

Child of parent-element:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="child-element">
  <template>
    <style>
    </style>
    <div>
      <h2>[[name]]</h2> <!-- This will print Pazzle -->
    </div>
  </template>
  <script>
    Polymer({
      is: 'child-element',
      properties: {
        name: {
          type: String,
          value: ''
        }

      },
    });
  </script>
</dom-module>

Two-way-data-binding
Parent Element

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../child-element/child-element.html">
<dom-module id="parent-element">
  <template>
    <style>
    </style>
    <div>
      <!-- Use the imported child element and bind the name property-->
      <child-element name="{{name}}"></child-element>
      <!-- Will print Contis in a h2 element instead of Pazzle -->

    </div>
  </template>
  <script>
    Polymer({
      is: 'parent-element',
      properties: {
        name: {
          type: String,
          value: ''
        }
      },

      ready: function() {
        this.name = "Pazzle";
      }

    });
  </script>
</dom-module>

Child of parent-element:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="child-element">
  <template>
    <style>
    </style>
    <div>
      <h2>[[name]]</h2> <!-- This will print Contis -->
    </div>
  </template>
  <script>
    Polymer({
      is: 'child-element',
      properties: {
        name: {
          type: String,
          value: '',
          notify: true,
          // notify will make it possible to send
          // our changed Name property back up
          observer: 'nameChanged'
        }
      },

      nameChanged: function() {
        if(this.name == 'Pazzle' || this.name == ''){
          this.name = "Contis";
        }
      }

    });
  </script>
</dom-module>