<script src="http://www.polymer-project.org/platform.js"></script>

<script src="http://www.polymer-project.org/polymer.js"></script>

<script>

  function setData() {

    var elementObserve = document.querySelector("my-element-observe");

    var elementWatcher = document.querySelector("my-element-watcher");

    var elementWatcherHack = document.querySelector("my-element-watcher-hack");

    elementObserve.data = 'some data';

    elementObserve.size = 20;

    elementWatcher.data = 'some data';

    elementWatcher.size = 20;

    elementWatcherHack.data = 'some data';

    elementWatcherHack.size = 20;

  }

</script>

​

​

<polymer-element name="my-element-observe">

  <template>

    Render-Count for Observe:{{renderCount}} |

    Size:{{size}} | data:{{data}}<br>

  </template>

  <script>

    Polymer('my-element-observe', {

      size : 0,

      data : '',

      renderCount : 0,

      observe : {

        size:'render',

        data:'render',

      },

      render : function(oldValue,newValue) {

        this.renderCount+=1;

        console.log('Observe: render called');

      }

    });

  </script>

</polymer-element>

​

<polymer-element name="my-element-watcher">

  <template>

    Render-Count for Watcher:{{renderCount}} |

    Size:{{size}} | data:{{data}}<br>

  </template>

  <script>

    Polymer('my-element-watcher', {

      size : 0,

      data : '',

      renderCount : 0,

      dataChanged : function() {

        console.log('Watcher: data changed');

        this.async(this.render);

      },

      sizeChanged : function() {

        console.log('Watcher: size changed');

        this.async(this.render);

      },

      render : function() {

        this.renderCount+=1;

        console.log('Watcher: render called');

      }

    });

  </script>

</polymer-element>

​

<polymer-element name="my-element-watcher-hack">

  <template>

    Render-Count for Watcher with Hack:{{renderCount}} |

    Size:{{size}} | data:{{data}}<br>

  </template>

  <script>

    Polymer('my-element-watcher-hack', {

      size : 0,

      data : '',

      isRender: false,

      renderCount : 0,

      dataChanged : function() {

        console.log('Watcher with Hack: data changed');

        this.isRender = true;

      },

      sizeChanged : function() {

        console.log('Watcher with Hack: size changed');

        this.isRender = true;

      },

      isRenderChanged : function() {

        if (this.isRender) {

          this.async(this.render);

        }

      },

      render : function() {

        this.renderCount+=1;

        this.isRender = false;

        console.log('Watcher with Hack: render called');

      }

    });

  </script>

</polymer-element>

​

​

​

<button onclick="setData()">Set Data</button>

<Br>

<my-element-observe></my-element-observe>

<br>

<my-element-watcher></my-element-watcher>

<br>

<my-element-watcher-hack></my-element-watcher-hack>

​

​