polymer/test/unit/bind-elements.html

<template>
  <div id="boundChild" value="{{value}}" negvalue="{{!bool}}" computedvalue="{{computedvalue}}"></div>
</template>
<script>
  Polymer({
    is: 'x-basic',
    published: {
      notifyingvalue: {
        type: Number,
        notify: true
      },
      computednotifyingvalue: {
        type: Number,
        notify: true
      },
      readonlyvalue: {
        type: Number,
        readOnly: true,
        notify: true
      }
    },
    computed: {
      computedvalue: 'computeValue(value)',
      computednotifyingvalue: 'computeNotifyingValue(notifyingvalue)'
    },
    bind: {
      value: 'valueChanged',
      computedvalue: 'computedvalueChanged',
      notifyingvalue: 'notifyingvalueChanged',
      readonlyvalue: 'readonlyvalueChanged'
    },
    valueChanged: function() {},
    computeValue: function(val) {
      return val + 1;
    },
    computedvalueChanged: function() {},
    notifyingvalueChanged: function() {},
    readonlyvalueChanged: function() {},
    computeNotifyingValue: function(val) {
      return val + 2;
    }
  });
</script>

<template>
  <x-basic id="basic1" 
    value="{{boundvalue}}"
    notifyingvalue="{{boundnotifyingvalue}}"
    computedvalue="{{boundcomputedvalue}}"
    computednotifyingvalue="{{boundcomputednotifyingvalue}}"
    readonlyvalue="{{boundreadonlyvalue}}">
  </x-basic>
  <x-basic id="basic2"
    value="[[boundvalue]]"
    notifyingvalue="[[boundnotifyingvalue]]"
    computedvalue="[[boundcomputedvalue]]"
    computednotifyingvalue="[[boundcomputednotifyingvalue]]">
  </x-basic>
</template>
<script>
  Polymer({
    is: 'x-compose',
    bind: {
      boundvalue: 'boundvalueChanged',
      boundnotifyingvalue: 'boundnotifyingvalueChanged',
      boundcomputedvalue: 'boundcomputedvalueChanged',
      boundcomputednotifyingvalue: 'boundcomputednotifyingvalueChanged',
      boundreadonlyvalue: 'boundreadonlyvalueChanged'
    },
    boundvalueChanged: function() {},
    boundnotifyingvalueChanged: function() {},
    boundcomputedvalueChanged: function() {},
    boundcomputednotifyingvalueChanged: function() {},
    boundreadonlyvalueChanged: function() {}
  });
</script>


<script>
  Polymer({
    is: 'x-reflect',
    published: {
      reflectedobject: {
        type: Object,
        reflect: true
      },
      reflectedarray: {
        type: Array,
        reflect: true
      },
      reflectednumber: {
        type: Number,
        reflect: true
      },
      reflectedstring: {
        type: String,
        reflect: true
      },
      reflectedboolean: {
        type: Boolean,
        reflect: true
      },
      reflecteddate: {
        type: Date,
        reflect: true
      }
    }
  });
</script>