I use if-template to show or hide elements in a list in a Polymer element. My template is based on a list of values and is filtered using a list of links.
Updating the list of values gives the desired effect. However, changing the list of filter links (deleting one element here) does not update the template.
<!DOCTYPE html> <html> <head> <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/platform.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/polymer.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <test-component></test-component> </body> </html> <polymer-element name='test-component' attributes='itemlist filterlist'> <template> <style> </style> <table id='table'> <tr template repeat="{{item in itemlist}}"> <template if="{{item | applyFilter(filterlist)}}"> <td>test</td> </template> </tr> </table> <input type='button' value='remove 1 element' on-click={{clicked}}></input> <div id='msg'></div> </template> <script> Polymer('test-component', { itemlist: [1,2,3], filterlist: [1,2], applyFilter: function(item, filterlist) { var test = false; if (filterlist) { filterlist.forEach(function(filteritem) { test = test || ((new RegExp(filteritem)).test(item)); }); } return test; }, clicked: function() { this.$.msg.innerHTML = 'Filter list was ' + this.filterlist; this.filterlist.splice(1,1); this.$.msg.innerHTML += ', now it\ ' + this.filterlist; } });
See http://jsbin.com/vuvikare/4/edit?html,output for executable code.
Is there a way to trigger this update (e.g. using filterChanged observer)?
thanks
source share