<!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>