How can i do a List-Binding using LitElement and vaadin (On Java binding)

Hi!

I want to know how can i do something like that https://vaadin.com/docs/v13/flow/polymer-templates/tutorial-template-list-bindings.html (this is on poylmer, but i want to know how is on LitElement)

In my case i have on polymer, and i want to move to LitElement

<template is="dom-repeat" items="{{topPlays}}">
	<li class="play">{{item.play}}
		<span class="amount">{{item.amount}}</span>
	</li>
</template>

On my LitElement template i use

static get properties() {
        return {
            topPlays: {type: Array}
        }
    }

On java code i have using polymer

public interface ChartsPanelModel extends TemplateModel {
        void setTopPlays(List<TopPlay> topPlays);
}

How can i do on LitElement? i can’t use setAttribute on a Array or a List

Hi, you can check this [lit-html document]
(https://lit-html.polymer-project.org/guide/writing-templates#repeating-templates) to see how to do repeating templates.

https://github.com/Artur-/flow-lit/blob/master/src/main/java/org/vaadin/artur/lit/view/listmap/LazyList.java#L30 has an example of setting an element property to a list of beans. It currently requires manual JSON conversion

If you want a client driven template (components and UI logic in template, data from the server), you should check out Vaadin 15 and Endpoints there. They allow you to do the same thing without any manual JSON conversion.