Polymer domrepeat, getting a value

Question

            <table>
            <tr>
                <th>Datum Begintijd Eindtijd Klas Docent</th>

            </tr>
                    <td><paper-listbox label="Dinosaurs" on-click="absentieverzenden" id="absl">
                            <template is="dom-repeat" items={{result}}>
                                <tr>
                                <paper-item>{{item.datum}} -
                                    {{item.begintijd}} -
                                    {{item.eindtijd}} -
                                    {{item.klas}} -
                                    {{item.docent}}
                                </paper-item>
                                </tr>
                            </template>


            </paper-listbox></td>

        </table>

On click I want to get the value from the paper-item that is being clicked. So I want to get item.datum from one of the paper items that dom repeat created.

            absentieverzenden: function () {
                console.log("absentieverzenden user=" + this.username);
                if (this.rol == "student") {
                    this.$.absdoorgeven.contentType = "application/json";
                    this.$.absdoorgeven.body = {
                        "username": this.username,
                        "gekozendatum": this.result.datum
                    };
                    this.$.absdoorgeven.generateRequest();
                }
            },

So here I want to send the first item from items from the selected paper-item and send it in the body. The problem is that I dont know how to tell the function to get the information from the selected paper-item.

Thanks in advance!

Answer 1

Something like this should work

<template id="domRepeat" is="dom-repeat" items={{result}}>

absentieverzenden: function (event) {
  console.debug(this.$.domRepeat.modelForElement(event.target));
}

There are also itemForElement() and indexForElement()
See also https://www.polymer-project.org/1.0/docs/devguide/templates.html

Answer 2

Use on-tap on tr tag something like that

<template is="dom-repeat" items={{result}}>
     <tr on-tap="absentieverzenden">
        <paper-item>{{item.datum}} -
           {{item.begintijd}} -
           {{item.eindtijd}} -
           {{item.klas}} -
           {{item.docent}}
        </paper-item>
      </tr>
</template>

JS code:

absentieverzenden: function (event) {
   console.log(event.model.item);
}