Templates 带过滤器的聚合物if模板：过滤器未更新_Templates_Filter_Polymer_Web Component

Templates 带过滤器的聚合物if模板：过滤器未更新

templates filter polymer

Templates 带过滤器的聚合物if模板：过滤器未更新,templates,filter,polymer,web-component,Templates,Filter,Polymer,Web Component,我正在使用if模板在聚合元素中显示或隐藏列表中的项。我的模板基于值列表，并使用引用列表进行筛选更新值列表会产生所需的效果。但是，更改过滤器引用列表（此处删除一个元素）不会更新模板 <!DOCTYPE html> <html> <head> <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/platform.js"></script> <script src=

我正在使用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;
  }
});


JS-Bin
测试
聚合物（“测试成分”{
项目列表：[1,2,3]，
过滤器列表：[1,2]，
applyFilter:函数（项，过滤器列表）{
var检验=假；
如果（过滤器列表）{
filterlist.forEach（函数（filteritem）{
test=test | |（（新RegExp（filteritem））。test（item））；
});
}
回归试验；
},
单击：函数（）{
this.$.msg.innerHTML='Filter list was'+this.filterlist；
该过滤器列表拼接（1,1）；
this.$.msg.innerHTML+='，现在它是'+this.filterlist；
}
});

有关可运行代码，请参阅

是否有方法触发此更新（例如使用filterChanged observer）

谢谢

这是一个很好的攻击，但我通过添加此方法：

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

基本上，它会在表中找到所有内部模板元素并强制更新（使用私有方法）。

您还可以稍微简化标记，这将消除对filterListChanged中循环的需要：现在我记得为什么黑客总是给我留下深刻印象。。。非常感谢