CODEWITHSUNDEEP
polymerweb-component
Shhhhh
Shhhhh

Reputation: 198

Polymer multiple similar elements and click events

I am trying to build a custom polymer element which has a div like this

<core-menu>
    <paper-item on-tap={{openPage}}><core-icon icon="add"></core-icon> Add Issues</paper-item>
    <paper-item on-tap={{openPage}}><core-icon icon="view-list"></core-icon> View Issues</paper-item>
    <paper-item on-tap={{openPage}}><core-icon icon="lock"></core-icon>Logout</paper-item>
</core-menu>

And this openPage function needs to provide this kind of operation

 openPage: function(event, details, sender) {
        console.log("open page called item "+ item);
 }

I am not sure how to get the item clicked. Say, if I click on the Logout item, i would like the value of item to be a number, like something that could say that nth paper-item was clicked.

I dont know how to get this value from event or details or sender.

Thanks in advance

Upvotes: 1

Views: 645

Answers (1)

zdarsky.peter
zdarsky.peter

Reputation: 6257

You can do something like this:

<core-menu>
   <paper-item data-action-id="1" on-tap={{openPage}}><core-icon icon="add"></core-icon> Add Issues</paper-item>
   <paper-item data-action-id="2" on-tap={{openPage}}><core-icon icon="view-list"></core-icon> View Issues</paper-item>
   <paper-item data-action-id="3" on-tap={{openPage}}><core-icon icon="lock"></core-icon>Logout</paper-item>
</core-menu>

And then:

openPage: function(event, details, sender) {
    console.log("open page called item "+ sender.target.attributes["data-action-id"]);
}

"sender.target" is returning paper-item

Upvotes: 3

Related Questions