Polymer：如何访问集合中的单个项目

Question

我正在创建一个聚合物元素，它显示了一个用于选择不同 div 的下拉列表，我们在这里称之为部分。在下拉列表中选择一个项目时，应显示相应的部分。您可以认为这更像是一个选项卡控件，而不是选项卡标题，我们有一个下拉控件。我想将每个部分与相应的 json 对象绑定，但使用像 section[0] 和 section[1] 这样的索引不起作用

<polymer-element name="my-elem">
<template>
    <div class="sections">
            <select on-change="{{sectionChanged}}">
                <template repeat="{{ sections }}">
                    <option>{{ name }}</option>
                </template>
            </select>

            <div id="section_0" class="section-config" bind="{{ sections[0] }}">
                <div>{{ sec0Prop }}</div> 
                Just for simplicity I am showing only one div here. This div can actually be quite complex
            </div>

            <div id="section_1" class="section-config" bind="{{ sections[1] }}">
                <div>{{ sec1Prop }}</div>
                This section view will be different than that of section 0
    </div>

        </div>
    </div>
</template>

<script>
    Polymer('my-elem', {
        sections: [{ sec0Prop: 'I am section 1 property' }, { sec1Prop: 'I am section 2 property' }],
        showSection: function(index) {
            $(this.shadowRoot.querySelectorAll('.section-config')).hide();
            $(this.shadowRoot.querySelector('#section_' + index)).show();
        },
        sectionChanged: function(e) {
            this.showSection(e.target.selectedIndex);
        }
    });
</script>
</polymer-element>

假设使用 jquery。 当我们不能在模板中使用重复因为每个项目的视图不同时，你能帮我绑定到集合中的单个项目吗？

Answer 1

你有身份证。所以获取项目的最佳方法是：this.$['section_' + index]。为什么不使用“核心页面”？使用“核心页面”，您无需 js 即可完成。