聚合物if-template with filter：过滤器没有更新 [英] Polymer if-template with filter: filter not updating
问题描述
我正在使用if-template来显示或隐藏聚合物元素内的列表中的项目。
我的模板基于一个值列表，并使用一个引用列表进行过滤。
更新值列表会产生所需的效果。但是，更改过滤器引用列表（此处删除一个元素）不会产生模板的更新。
<！DOCTYPE HTML>
< html>
< head>
< script src =// cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/platform.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}}>
< td>测试< / 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;
}
}）;
a href =http://jsbin.com/vuvikare/4/edit?html,output =nofollow> http://jsbin.com/vuvikare/4/edit?html,output for runnable code。
有没有办法触发这个更新（例如使用filterChanged观察者）？
这是一个非常黑客，但我通过添加这个方法来实现它：
filterlistChanged：function（）{
Array.prototype.forEach.call（this。$。table.querySelectorAll（'template [if]'），function（t）{
t.iterator_.updateIteratedValue（） ;
}）;
$ b基本上，它会查找表格中的所有内部模板元素并强制它们更新（使用私人方法）。
I am using an if-template to show or hide items in a list, within a Polymer-element.
My template is based on a list of values, and filtered using a reference list.
Updating the list of values yields the desired effect. However, changing the filter reference list (here removing one element) does not yield an update of 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\'s ' + this.filterlist;
}
});
See http://jsbin.com/vuvikare/4/edit?html,output for runnable code.
Is there a way to trigger this update (for example using filterChanged observer)?
Thanks
解决方案 This is very much a hack, but I got it to work by adding this method:
filterlistChanged: function() {
Array.prototype.forEach.call(this.$.table.querySelectorAll('template[if]'), function(t) {
t.iterator_.updateIteratedValue();
});
},
Basically, it finds all the inner template elements in the table and forces them to update (using a private method).
这篇关于聚合物if-template with filter：过滤器没有更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
