聚合物dom-repeat不能正确渲染儿童

时间:2016-11-04 11:27:48

标签: javascript polymer polymer-1.0

我已经搜索了很长一段时间,可以找到更少的相似主题,但没有解决我的问题。我有一个聚合物元素,用于递归渲染树重复重复。问题是当观察者触发时,元素在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>

0 个答案:

没有答案