<!DOCTYPE html> <html> <head> <title>auto-binding test</title> <script src="bower_components/webcomponentsjs/webcomponents.js"></script> <link rel="import" href="bower_components/polymer/polymer.html"/> </head> <body unresolved> <dom-module id="number-element" > <template> I'm number <span>{{number}}</span>. Click me! <template is="dom-if" if="{{odd}}"> (By the way, I'm odd.) </template> </template> <script> Polymer({ is:'number-element', properties: { number: { value: 0, reflectOnAttributes: true, observer: "numberChanged", type: Number, notify: true }, odd: { value: false, type: Boolean, notify: true } }, numberChanged: function() { this.odd = this.number % 2 == 1 ? true : false; } }); </script> </dom-module> <template id="page-template" is="dom-bind"> <h1><template is="auto-binding"> Demo</h1> <template is="dom-if" if="{{hasClicked(lastClicked)}}"> <p>You last clicked on <span>{{lastClicked}}</span>.</p> </template> <template is="dom-repeat" items="{{numbers}}" as="item"> <p> <number-element number="[[item]]" on-click="handleClick"></number-element> </p> </template> </template> <script> var template = document.querySelector('#page-template'); template.isNumberOdd = {}; template.numbers = [0, 1, 2, 3]; template.handleClick = function(e) { template.lastClicked = e.target.number; }; template.hasClicked = function(e) { if(e!=null) return true; else return false; } </script> </body> </html>