Add an event listener inside a <template> / vaadin

[rtf...@gmail.com]

I have this code (Polymer 3/TS), and I can not put event to fire inside a template! Anyone can help!

class LangueageMenu extends LitElement {

//...

render() {

return html `

<vaadin-context-menu open-on="click">

<template id='tmpl'>

<vaadin-list-box>

<vaadin-item id='en' @click="${(_event) => alert('en')}">English</vaadin-item> <<-- DO NOT WORK

<vaadin-item on-click="_es">Español</vaadin-item> <<-- DO NOT WORK

</vaadin-list-box>

</template>

<paper-icon-button on-click="" icon="more-vert"></paper-icon-button>

</vaadin-context-menu>

`;

}

_es() {

// no not work

}

}

[Thad Humphries]

I recommend you ask Vaadin on the Slack channel. I had a question about using vaadin-grid in lit-html back in the summer, before vaadin-grid 5.2. IIRC it was that <template> didn't work inside html``. I used P3 wrapping a P2 grid until vaadin-grid 5.2 was out. (I might be remembering this wrong, so ask on Slack.)

[Justin Fagnani]

<template> technically "works" in lit-html now, but most bindings, but especially property and event listeners, aren't going to work properly inside template elements. In this case the event listener is added to a node in a template, but then the template is probably cloned by <vaadin-context-menu> and event listeners aren't cloned with nodes.

<vaadin-context-menu> is probably expecting a Polymer-style template, with Polymer binding syntax. They'll need a new version (if one doesn't already exist) that's more agnostic towards templates and take a render function or something similar.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/02fe5ec0-5ddf-4921-97fe-fec9ebf5d129%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.