我已经搜索了很长一段时间,可以找到更少的相似主题,但没有解决我的问题。我有一个聚合物元素,用于递归渲染树重复重复。问题是当观察者触发时,元素在dom-repeat内部没有正确呈现。在我的示例中,您可以看到在前2个菜单测试项中正确呈现了dom并找到了ul.list节点。在dom-repeat元素的render()函数之后,您可以看到不再找到元素,并且不渲染阴影或光照dom。
有人可以帮助我吗?
这是一个演示问题的jsbin示例:https://jsbin.com/zisakizeca/edit
<dom-module id="menu-test">
<template>
<content id="menu"></content>
<template is="dom-if" if="{{hasItems}}">
items:
<ul class="list">
<template is="dom-repeat" items="[[items]]" filter="filterItems" observe="changed">
<li>
<label>[[getLabel(item)]]: [[item.changed]]</label>
<template is="dom-if" if="[[item.children]]">
<menu-test items="[[item.children]]"></menu-test>
</template>
</li>
</template>
</ul>
</template>
</template>
<script>
Polymer({
is: 'menu-test',
properties: {
items: {
type: Array
},
hasItems: {
type: Boolean,
computed: 'itemsAreSet(items)'
}
},
attached() {
// Should find ul.list every time
console.log(this.$$('.list'));
},
itemsAreSet(items) {
return !!items;
},
getLabel(item) {
return item.label || item;
},
filterItems(item) {
return !item.changed;
}
});
</script>
</dom-module>