polymer/test/unit/bind-elements.html

<template>
  <div id="boundChild" 
    value="{{value}}"
    negvalue="{{!bool}}"
    attrvalue$="{{attrvalue}}"
    computedvalue="{{computedvalue}}"
    computedvaluetwo="{{computedvaluetwo}}"
    camel-case="{{value}}"
    computed-inline="{{computeInline(value,add, divide)}}"
    computed-inline2="{{computeInline(value, add,divide)}}"
    computedattribute$="{{computeInline(value, add,divide)}}"
    style$="{{boundStyle}}"
    custom-event-value="{{customEventValue::custom}}"
    custom-event-object-value="{{customEventObject.value::change}}">
    Test
    </div>
</template>
<script>
  Polymer({
    is: 'x-basic',
    properties: {
      value: {
        type: Number,
        observer: 'valueChanged',
        value: 10
      },
      computedvalue: {
        computed: 'computeValue(value)',
        observer: 'computedvalueChanged'
      },
      computedvaluetwo: {
        computed: 'computeValue(valuetwo)',
        observer: 'computedvaluetwoChanged'
      },
      notifyingvalue: {
        type: Number,
        notify: true,
        computed: 'notifyingvalueChanged'
      },
      computednotifyingvalue: {
        type: Number,
        notify: true,
        computed: 'computeNotifyingValue(notifyingvalue)'
      },
      computedFromMultipleValues: {
        type: Number,
        notify: true,
        computed: 'computeFromMultipleValues(sum1, sum2, divide)',
        observer: 'computedFromMultipleValuesChanged'
      },
      camelNotifyingValue: {
        type: Number,
        notify: true
      },
      readonlyvalue: {
        type: Number,
        readOnly: true,
        notify: true,
        observer: 'readonlyvalueChanged'
      },
      add: {
        value: 20
      },
      divide: {
        value: 2
      },
      customEventValue: {
        type: Number,
        observer: 'customEventValueChanged'
      },
      customEventObject: {
        type: Object,
        value: function() { return {}; }
      }
    },
    observers: {
      'dep1 dep2 dep3': 'multipleDepChangeHandler',
      'customEventObject.value': 'customEventObjectValueChanged'
    },
    valueChanged: function() {},
    computeValue: function(val) {
      return val + 1;
    },
    computedvalueChanged: function() {},
    computedvaluetwoChanged: function() {},
    notifyingvalueChanged: function() {},
    readonlyvalueChanged: function() {},
    computeNotifyingValue: function(val) {
      return val + 2;
    },
    computeFromMultipleValues: function(sum1, sum2, divide) {
      return (sum1 + sum2) / divide;
    },
    computedFromMultipleValuesChanged: function() {},
    multipleDepChangeHandler: function() {},
    computeInline: function(value, add, divide) {
      return (value + add) / divide;
    },
    customEventValueChanged: function() {},
    customEventObjectValueChanged: function() {}
  });
</script>

<template>
  <x-basic id="basic1" 
    value="{{boundvalue}}"
    notifyingvalue="{{boundnotifyingvalue}}"
    camel-notifying-value="{{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',
    observers: {
      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',
    properties: {
      reflectedobject: {
        type: Object,
        reflectToAttribute: true
      },
      reflectedarray: {
        type: Array,
        reflectToAttribute: true
      },
      reflectedNumber: {
        type: Number,
        reflectToAttribute: true
      },
      reflectedstring: {
        type: String,
        reflectToAttribute: true
      },
      reflectedboolean: {
        type: Boolean,
        reflectToAttribute: true
      },
      reflecteddate: {
        type: Date,
        reflectToAttribute: true
      }
    }
  });
</script>

<script>
  Polymer({
    is: 'x-notifies1',
    properties: {
      notifies: {
        notify: true
      }
    },
    ready: function() {
      this.notifies = 'readyValue';
    }
  });
</script>

<dom-module id="x-notifies2">
  <template>
    <x-notifies1 id="notifies1" notifies="{{shouldChange}}"></x-notifies1>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-notifies2',
    properties: {
      notifies: {
        notify: true
      }
    }
  });
</script>

<dom-module id="x-notifies3">
  <template>
    <x-notifies2 id="notifies2" notifies="{{shouldNotChange}}"></x-notifies2>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-notifies3',
    properties: {
      shouldNotChange: {
        observer: 'shouldNotChangeChanged'
      }
    },
    shouldNotChangeChanged: function() { }
  });
</script>