在 dom-repeat 模板内的纸按钮中执行事件

Question

I have the following element:

<dom-module id="my-blogentry">
<template>
    <style>
        :host {
            display: block;
        }
        .div-general{
      </style>
    <div class="div-general">
        <template is="dom-repeat" items="{{entries}}">
            <paper-material elevation="1" animated="true" class="paper-material-presentation">
                <div class="div-date-left">
                    <span>{{item.date}}</span>
                </div>
                <div>
                    <iron-image src$="../../images/{{item.image}}" style="width:128px; height:128px;" sizing="cover"></iron-image>
                    {{item.resume}} 
                    <paper-button id="bt_readmore" on-tap="toggle">Read More</paper-button>
                    <iron-collapse id="collapse">
                      <div>{{item.content}}</div>
                    </iron-collapse>
                </div>
            </paper-material>
        </template>
    </div>
</template>
<script>
    Polymer({
        is: 'my-blogentry',

        ready: function() {
            this.entries = [
                {id: '1', title: ‘xxx.', date: 'Tuesday, March 8, 2016', image:'im-blogdefault.png', resume:’xxx’,content:’xxxx’}
            ];
          },

        toggle: function () {
            this.$$('#collapse').toggle();
        }
    });

</script>

If you could check on the element code I have an iron-collapse element inside the <template dom-repeat> and a button. My proposal is the user could tap on the button and toggle the button to open the collapse element.

The problem is that the code that I have work fine with open the first item, but when I have more items on the list and I press the second item button the first and second collapse is open too.

I was searching other posts here in the forum and I found this:
Documentation This example modify the items in the model but no the DOM that it is what I need (toggle my iron-collapse element).

I'll appreciate any help on that.

Answer 1

This is because in your code all <iron-collapse> get the same id="collapse" .

You can either add some value from entries to the <paper-button> and the <iron-collapse> or try to get the DomRepeatModel from the buttons click event to find the right collapse.

Example code using an unique id property from entries (I just assumed it has one):

<paper-button ident$="{{entries.id}}" on-tap="toggle">Read More</paper-button>
<iron-collapse ident$="{{entried.is}}">

    toggle: function (event) {
        this.$$('[ident="' + event.target.getAttribute('ident') + '"]').toggle();
    }

Answer 2

Here is the solution, I assigned and the id to the iron-collapse identifier and the key is using the symbol $ in the id attribute:

<template is="dom-repeat" items="{{entries}}">
            <paper-material elevation="1" animated="true" class="paper-material-presentation">
                <div class="div-date-left">
                    <span>{{item.date}}</span>
                </div>
                <div class="div-entry-resume">
                    <iron-image src$="../../images/{{item.image}}" style="width:128px; height:128px;" sizing="cover"></iron-image>
                    {{item.resume}} 
                    <iron-collapse id$="collapse{{item.id}}">
                      <div>{{item.content}}</div>
                    </iron-collapse>
                    <div class="div-entry-bottom">
                        <paper-button id$="bt_readmore" on-tap="toggle">Read More</paper-button>
                    </div>
                </div>
            </paper-material>
        </template>

and the polymer function:

toggle: function (event, detail, sender) {
            var id = event.model.item.id;
            var selector = '#collapse' + id;
            this.$$(selector).toggle();
        }

Thanks to @Günter Zöchbauer for your help on this.