0

I am posting this because the answer posted in this SO thread isn't working for me. I want to pass extra data params to an on-tap event handler from a paper-button (in a dom-repeat). The results using the following code snippets provide a sub paper-material element with no data.

Using:

<template is="dom-repeat" items="{{someParam}}>
  <paper-button on-tap="_handleTap" data-args="{{item}}">...</paper-button>
</template>

And handling with:

var args = e.target.getAttribute('data-args').split(',');

or

e.target.dataset.args

Both return <paper-material ...>...</paper-material>

What is going on? Why won't the targets return the paper-button tapped or that data in it?!

Community
  • 1
  • 1
Sean
  • 2,412
  • 3
  • 25
  • 31

3 Answers3

4

The most efficient way to access the data from a template instance is to do the following:

<template is="dom-repeat" items="[[someParam]]">
  <paper-button on-tap="_handleTap">...</paper-button>
</template>

...

_handleTap: function(e) {
  var model = e.model.item;
  // Do something
}
Ricky
  • 999
  • 6
  • 12
  • 1
    Awesome! Thanks Ricky! That is a much better approach. Note for others: By using ".model" as Ricky explained I was able to get the *entire* data structure of the {{item}} (as an object) from the the dom-repeat (which is really what I wanted to do anyway.) – Sean Sep 14 '15 at 01:30
2

To bind to a native attribute like data-*, you'll have to use attribute-binding ($=). As for event retargeting, you'll have to use Polymer.dom(event).localTarget to get to the proper target emitting that event, in this case your paper-button (rootTarget would also return paper-material).

Here's a working example I made. http://jsbin.com/fehene/edit?html,output

Neil John Ramal
  • 3,734
  • 13
  • 20
0

After some hacking around it turns out the dataHost property on the target points to the original tapped element. Not sure why this is not documented. It may be unreliable but it works for me.

event.target.dataHost.args

UPDATE: The above does not work after all

Ugh. Still hacking away.

UPDATE: Turns out you have to camel case the data attributes.

event.target.dataHost.dataArgs

Super convoluted and hidden :-/

Sean
  • 2,412
  • 3
  • 25
  • 31
  • `this` usually refers to the raising element on delegated events, might be less contrived... – dandavis Sep 09 '15 at 22:10
  • Dan, not sure what you mean by using "this" Within the handler function the this reference points to the Polymer element which in this case is a parent element/container. I will update the question so that is more clear in case that helps uncover a solution. – Sean Sep 09 '15 at 22:29