data-binding object - showing it on attribute

by Ankur Marwaha

HTML

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">

<polymer-parent ></polymer-parent>

<dom-module id="polymer-parent">
  <template>
    <div>
      <label>Parent:</label>
      <span>{{value}}</span>
      <div>
        <button on-click="setValue">Set Parent Value</button>
      </div>
    </div>
    <div>
      <polymer-child value="{{value}}" temp-po="{{value1}}"></polymer-child>
    </div>

  </template>
  <script>
    Polymer({
      is: 'polymer-parent',

      properties: {

        value: {
          type: String
        }, 
        value1: {
          type: Object,
          value:{basd:'jbsd'},
          notify:true
        }
      },
      setValue: function() {
        this.value = "Parent Value";
      }
    });

  </script>
</dom-module>

<dom-module id="polymer-child">
  <template>
    <label>Child:</label>
    <span>{{value}}</span>
    <div>
      <button on-click="setValue">Set Child Value</button>
    </div>
  </template>
  <script>
    Polymer({
      is: 'polymer-child',

      properties: {

        tempPo: {
          type: Object,
          value: null,
          notify: true,
          reflectToAttribute: true
        }
      },
      setValue: function() {
        this.value = "Child Value";
      }
    });

  </script>
</dom-module>