聚合物if-带过滤器的模板：过滤器没有更新

我正在使用if-模板来显示或隐藏聚合物元素内的列表中的项目。我的模板基于一系列值，并使用参考列表进行过滤。聚合物if-带过滤器的模板：过滤器没有更新

更新值列表会产生所需的效果。但是，更改过滤器引用列表（此处删除一个元素）不会产生模板的更新。

<!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\'s ' + this.filterlist; 
    } 
});

可运行的代码见http://jsbin.com/vuvikare/4/edit?html,output。

有没有办法触发此更新（例如使用filterChanged观察者）？

感谢

来源

2014-05-14 Ahrrrin Jon

这不能不说是一个黑客，但加入这个方法我got it to work：

filterlistChanged: function() { 
    Array.prototype.forEach.call(this.$.table.querySelectorAll('template[if]'), function(t) { 
    t.iterator_.updateIteratedValue(); 
    }); 
},

基本上，发现表中的所有内模板元素，并强制其进行更新（使用一个私人方法）。

来源

2014-05-15 19:13:47 CletusW

你也可以简化你的标记，这将删除filterListChanged中循环的需要：http://jsbin.com/vuvikare/12/edit?html,output – CletusW

现在我记得我为什么总是印象深刻由黑客... 非常感谢 –

聚合物if-带过滤器的模板：过滤器没有更新

回答

相关问题