CODEWITHSUNDEEP
data-bindingpolymer
Souvik Basu
Souvik Basu

Reputation: 3139

Polymer: How to access individual items in collection

I am creating a polymer element which shows a dropdown for selecting different div which we call sections here. On selection of an item in the dropdown the respective section should show up. You can consider this more like a tab control where instead of a tab header we have a dropdown control. I want to bind each section with the respective json object but using index like sections[0] and sections[1] is not working

<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>

Assume jquery is used. Can you please help me with how to bind to individual items in a collection when we cannot use repeat in template as the view for each item is different?

Upvotes: 0

Views: 80

Answers (1)

max_well
max_well

Reputation: 341

You have id. So best way to get item: this.$['section_' + index]. Why you don't use 'core-pages'? With 'core-pages' you can do it without js.

Upvotes: 0

Related Questions