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;
}
});
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;
}
});