Search code examples
htmlpolymerweb-component

How to get data-attribute value of paper-card from on-tap event


The goal is to get the value of the data-id-attribute of the paper-card in the method openForm called from the ontap event.

Neither of the two attempts down work. Here is my code:

<div class="layout horizontal wrap">
    <template is="dom-repeat" items="{{itemList}}">
    <paper-card on-tap="openForm" data-id="{{item.id}}">
        <paper-ripple></paper-ripple>
        <paper-item>
            <iron-icon class="big" src$="{{setIcon(item)}}"></iron-icon>
            <paper-item-body two-line>
                <div>{{item.fullNameRev}}</div>
                <div secondary style$="{{color(item.groupColor)}}">{{item.group}}</div>
            </paper-item-body>
        </paper-item>
        </paper-card>
    </template>
</div>

Polymer({
        is : "my-element",
        openForm: function(e) {
                e.srcElement.getAttribute("data-id"); // does not work
                e.target.getAttribute("data-id"); // neither works
        },
        color: function(c) {
            return "color:" + c;
        }
});

Solution

  • I think the answer you are looking for can be found here: Handling events in dom-repeat templates

    Explains it better than I can, but I guess in short it creates a 'model' accessible to e.model.item.data-id for whichever paper-card sends the event. I think your code will look something along the lines of:

    Polymer({
        is : "my-element",
        openForm: function(e) {
                var model = e.model
                model.item.id, //think this will be the value
        color: function(c) {
            return "color:" + c;
        }
    });