web-padawan
commented
4 years ago Hi, you need to listen for @selected-changed event (not camel case).
Closed dflorey closed 4 years ago
web-padawan
commented
4 years ago Hi, you need to listen for @selected-changed event (not camel case).
web-padawan
commented
4 years ago Also, please note that <template> is not recommended to be used with lit-html.
The recommended way is to use renderer as demonstrated here:
https://glitch.com/edit/#!/vaadin-context-menu-renderer?path=app.js:24:0
dflorey
commented
4 years ago Yes, I tried @selected-changed at first, but it also did not work. Probably it is not working when using with lit-html?
web-padawan
commented
4 years ago Can you please provide a full code example?
dflorey
commented
4 years ago This was the code that was not working. I'm using the renderer now and it works! Thanks!!
let items: TemplateResult[] = []
let selected = 0
Object.keys(EDITORS).forEach(function (key, index) {
let editor = EDITORS[key];
if (field.type == editor.name) {
selected = index
}
if (editor.question) {
items.push(html<vaadin-item>${editor.icon}<span>${editor.title}</span></vaadin-item>)
}
})
let typeSelector html<vaadin-context-menu><template><vaadin-list-box selected="${selected}" @selected-changed="${(e: CustomEvent) => this.typeChanged(e, index)}">${items}</vaadin-list-box></template><span @click="${this.openContextMenu}">${editor.title}</span></vaadin-context-menu>
`
web-padawan
commented
4 years ago Ok, so this is exactly what I supposed at https://github.com/vaadin/vaadin-context-menu/issues/270#issuecomment-610402305
This is not supposed to work. Polymer's template system has no reference to the containing LitElement. See also https://github.com/Polymer/lit-element/issues/915#issuecomment-598368388 where it is also explained.
We are planning to drop <template> support in future versions. I'm going to test if it is possible to make a lit-html directive on top of renderer API that would help with declarative usage.
Closing as wont't fix.
web-padawan
commented
4 years ago @dflorey I prototyped a directive mentioned in the comment above. See demo here: https://glitch.com/edit/#!/vaadin-lit-renderer-experiment?path=app.js:41:0
The demo uses vaadin-select but with vaadin-context-menu it should work the same.
Note:
renderer yourself (it does that internally)
Hi, I'm using with items defined in a tag.
I'm struggling to listed to events when the user makes a selection in the vaadin-list-box.
I tried various variations like these:
<vaadin-list-box selected="${selected}" @selectedChanged="${myHandler}">...It seems to be working when populating the items programmatically, but I'd like to stick with the tag. Is this supported?