Polymer 1.0 test for nested templates
by gabriela b
HTML
<script src="https://elements.polymer-project.org/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">
<dom-module id="dropdown-for-array">
<template>
<select id="selectbox" value="{{selectedId::change}}">
<template is="dom-repeat" items="{{arrayItems}}" >
<!-- <option value="{{item}}" id="{{item}}">{{item}}</option> -->
<option value="{{item}}" id="{{item}}" selected$="{{isSelected(index)}}">{{item}}</option>
</template>
</select>
</template>
</dom-module>
<dropdown-for-array array-items='["admission", "alert", "bvt_sample", "clinicalpath", "clinicalsummary", "contactreport"]' selected-id="4">
</dropdown-for-array>
JavaScript
Polymer({
is: "dropdown-for-array",
properties: {
arrayItems: {
type: Array
},
selectedId : {
type: String,
notify : true,
observer: '_observer'
}
},
_observer: function (e) {
//alert('id changed ' + e);
console.log('id changed ' + e);
},
ready: function () {
//...
},
isSelected: function(index) {
console.log(index);
return index == this.selectedId;
}
});