Question

我正在创建一个聚合物元素，它显示一个下拉列表，用于选择不同的div，我们在这里称之为部分。在下拉列表中选择项目时，应显示相应的部分。您可以将此更像是一个选项卡控件，而不是选项卡标题，我们有一个下拉控件。我想用相应的json对象绑定每个部分，但使用像[0]部分和部分[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

你有身份证明。获得项目的最佳方式：此。$ ['section_'+ index]。为什么你不使用'核心页'？使用“核心页面”，您可以在没有js的情况下完成。

聚合物：如何访问集合中的各个项目

1 个答案: