polymer - functions calls inside dom-repeat only executed once -

we cannot simple use case running polymer@1.4.0. have list of items. if user click on item, icon before item shown. specific is-selected class added item.

the list rendered dom-repeat. each list item looks like:

{   "label": "item 1",   "value": 0 } 

if user click in item, store value in variable selectedvalue. reason, dom-repeat not rerendering. functions isselected , getselectedclass called initially. not after click-interaction. tried use this.$.listitems.render(); inside selectitem-function. have effect. how can handle this?

our current code:

<dom-module id="selectable-list">   <template>     <style is="custom-style" include="selectable-list-styles"></style>     <ul id="selectable-list">       <template is="dom-repeat" items="[[items]]" id="itemlist">         <li class$="{{getselectedclass(item)}}">           <template is="dom-if" if="{{isselected(item)}}">             <iron-icon icon="sanitas-icons:check"></iron-icon>           </template>           <button type="button" on-click="selectitem">{{item.label}}</button>         </li>       </template>     </ul>   </template>    <script>     var selected_class = 'is-selected';      polymer({        is: 'selectable-list',        properties: {         items: {           type: array,           value: []         },         selectedvalue: {           type: object,           notify: true,           reflecttoattribute: true         }       },        selectitem: function(event){         this.selectedvalue = event.model.item.value;       },         /**        * check if list item selected        *        * @param {object} item        * @returns {boolean}        */       isselected: function(item){         return item.value === this.selectedvalue;       },         /**        * selected class if item selected        * @param {object} item        * @returns {string}        */       getselectedclass: function(item){         return this.isselected(item) ? selected_class : '';       }      });   </script> </dom-module> 

the problem dom-if , dom-repeat not re-triggered once select item both of them depends on item not change. simple solution add selectedvalue variable functions

<li class$="{{getselectedclass(item, selectedvalue)}}">   <template is="dom-if" if="{{isselected(item,selectedvalue)}}"> 

and in js

isselected: function(item, selectedvalue){   return item.value === selectedvalue; },  getselectedclass: function(item, selectedvalue){   return this.isselected(item, selectedvalue) ? selected_class : ''; } 

<base href="https://polygit.org/polymer+v1.4.0/components/">    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>  <link rel="import" href="polymer/polymer.html">  <dom-module id="selectable-list">    <template>      <style is="custom-style" include="selectable-list-styles"></style>      <ul id="selectable-list">        <template is="dom-repeat" items="[[items]]" id="itemlist">          <li class$="{{getselectedclass(item, selectedvalue)}}">            <template is="dom-if" if="{{isselected(item,selectedvalue)}}">              yes            </template>            <button type="button" on-click="selectitem">{{item.label}}</button>          </li>        </template>      </ul>    </template>      <script>      var selected_class = 'is-selected';        polymer({          is: 'selectable-list',          properties: {          items: {            type: array,            value: function() {              return [{                "label": "item 1",                "value": 0              }, {                "label": "item 2",                "value": 1              }, {                "label": "item 3",                "value": 2              }]            }          },          selectedvalue: {            type: object,            notify: true,            reflecttoattribute: true          }        },          selectitem: function(event) {          this.selectedvalue = event.model.item.value;        },            /**         * check if list item selected         *         * @param {object} item         * @returns {boolean}         */        isselected: function(item, selectedvalue) {          return item.value === selectedvalue;        },            /**         * selected class if item selected         * @param {object} item         * @returns {string}         */        getselectedclass: function(item, selectedvalue) {          return this.isselected(item, selectedvalue) ? selected_class : '';        }        });    </script>  </dom-module>      <selectable-list></selectable-list>