Polymer docs for event handling should cover argument passing

[arthurevans]

From @000drax on September 8, 2017 23:27

Polymer docs for event triggering should really show an example that involves passing an argument into the function.

This StackOverflow answer did what I needed, but I imagine this use case is so common that it should be in the actual docs.

https://stackoverflow.com/a/40205828

By the way, is the SO answer the canoncial way to do this? It is a bit inconsistent/surprising that some parts of Polymer allow for directly passing arguments into functions via the template (e.g. the "if" argument within a dom-if allows syntax like "myfunction(prop)"), but events don't allow this.

Docs:
https://www.polymer-project.org/1.0/docs/devguide/events
https://www.polymer-project.org/2.0/docs/devguide/events

Copied from original issue: Polymer/polymer#4834

[arthurevans]

From @guzmanpaniagua on September 11, 2017 21:54

This is something, dificult to get an agreement.

for me to create an event you only need to do

// in the js  
delete: function() {
  this.fire('my-event', {'name':this.name});
}
// in the html 
<button on-tap="delete">Delete</button>

like this
codepen for listen a click event

if you have diferent actions you can use a diferent function name to choose
codepen for listen a click many actions

for repeaters you colud use something

// in the js  
delete: function(e) {
  var item = e.model.item;
  this._dispatchEvent('delete:item',item)
},
edit: function(e) {
  var item = e.model.item;
  this._dispatchEvent('edit:item',item)
},
_dispatchEvent:function(type, item){
  this.fire(type, item);
}

// in the html 
<template is="dom-repeat" id="menu" items="{{menuItems}}">
    <div>
      <span>{{item.id}}</span>
      <span>{{item.name}}</span>
      <span>{{item.Description}}</span>
      <button on-tap="delete">Delete</button>
      <button on-tap="edit">Edit</button>
    </div>
</template>

like this
codepen for listen a click event repeater

there are developer who loves to use data atributes to store information, recover from the html tag in the javascript and use it, but i don like it.

as a general rule, i try not to pass data to html to get it back from js, you already have the data in the properties, so, you can get them from there, if need to know som id or something you can just change the function name and use this to know which action is, or which properties to take.

The repeater example is old, now i try to use e.model.index to know the position and use this to acces to the actual value, instead of use the model pased inside ev.model.

It will be probably more easy if polymer does like other frameworks

<td ng-click="onClick(obj)">
      {{obj.name}}
</td>

but this is not free you need to parse the html to get the value, understand what the user wants and pass it.

what polymer does is to give you the item by default in the model property inside the event, so you use what you need from it, and the index too, so you can use it.

Other developers think it is too much to pass always all the object and other likes to see the data in a data-atributte (for use them in protractor for example)

And for the update documentation part, I agree, some improvement could be done may be, a pull request
could help

[arthurevans]

I don't think we have a canonical way to pass data to an event handler, but we should probably make clear how these event handlers are different from the default event handlers like onclick="someStringOfJavaScript" ...