Polymer 1.0 test for nested templates
HTML
<script src="https://elements.polymer-project.org/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/polymer/polymer.html"></script>
<!--<script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/webcomponentsjs/webcomponents-lite.js"></script>-->
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-button/paper-button.html" />
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-checkbox/paper-checkbox.html" />
<dom-module is="wc-rnd-checkboxes">
<template>
<paper-button on-click="handleRndGenerator">Random Items</paper-button><br />
<template is="dom-repeat" items="{{data}}">
<paper-checkbox></paper-checkbox>
<span>{{index}}</span>
<br />
</template>
</template>
</dom-module>
<h3>Polymer Dom-repeat and paper-checkbox</h3>
<p>
<b>Instructions:</b>
<ol>
<li>click on the first checkbox;</li>
<li>click on generate "Random Items";</li>
<li>Issue: Polymer does not uncheck the first checkbox</li>
</ol>
</p>
<wc-rnd-checkboxes></wc-rnd-checkboxes>
JavaScript
Polymer({
is: "wc-rnd-checkboxes",
properties: {
data: { type: Array, value: [1, 2, 3, 4, 5] }
},
handleRndGenerator: function() {
this.data = [];
var length = Math.floor((Math.random() * 5) + 0)
for (i=0; i < length; i++) {
var irnd = Math.floor((Math.random() * 10) + 1);
this.data.push(irnd);
}
}
});