使用 Vaadin LitRenderer 的动态 HTML

Question

使用 Vaadin 22+

我正在尝试使用 LitRenderer 在 Vaadin 网格中显示一些动态 html。

以前可以使用现已弃用的 TemplateRenderer使用此 hack 来实现

var templateRenderer = TemplateRenderer.<Event>of("""
<div>
  <ul inner-h-t-m-l="[[item.html]]">
  
  </ul>
</div>
""").withProperty("html", item -> {
  String listItems = "";
  for (EventItem eventItem : item.getEventItems()) {
    listItems += "<li>"+eventItem.getValue()+"</li>";
  }
  return listItems;
});

/*
  Produces html like
  <div>
    <ul>
      <li>Thing 1</li>
      <li>Thing 3</li>
      <li>Thing 845</li>
    </ul>
  </div>
  */

这里重要的部分是设置包装元素的innerHTML。

有没有办法使用 LitRenderer 来做到这一点？我发现 Lit-Template 本身就有unsafeHTML 指令来实现这种目的。但我没有运气尝试让它或其他方法发挥作用。

谢谢

更新：2021.3.2 修复示例代码

Answer 1

您可以使用不带 unsafeHTML 的 lit 渲染器来渲染示例：

grid.addColumn(LitRenderer.<String>of(" <ul>" +
                "        ${item.eventItems.map((eventItem) =>" +
                "            html`<li>${eventItem}</li>`\n" +
                "        )}\n" +
                "    </ul>").withProperty("eventItems", i -> {
                    return List.of("item 1", "item 2", "item 3");
        }));

如果你确实想显示自定义 html，你可以使用组件渲染器：

grid.addColumn(new ComponentRenderer<>(i -> {
            List<String> strings = List.of("item 1", "item 2", "item 3");
            String listItems = "";
            for (String eventItem : strings) {
                listItems += "<li>"+eventItem +"</li>";
            }
            return new Html("<ul>"+listItems+"</ul>");
        }));

如果您不想使用组件渲染器，您可以使用 unsafeHTML 创建自定义光照组件：

import {css, html, LitElement} from 'lit';
import {unsafeHTML} from 'lit/directives/unsafe-html.js';
import { customElement } from 'lit/decorators.js';

@customElement('unsafe-html-component')
export class MyTestComponent extends LitElement {

    static get styles() {
        return css`
        :host {
            display: block;
        }
        `;
    }
    private html:string = "";

    render() {
        return html`<ul>${unsafeHTML(this.html)}</ul>`;
    }

}

你可以在 Java 中使用它：

grid.addColumn(LitRenderer.<String>of(" <unsafe-html-component .html=${item.html}></unsafe-html-component>")
                .withProperty("html", i -> {
                    List<String> strings = List.of("item 1", "item 2", "item 3");
                    String listItems = "";
                    for (String eventItem : strings) {
                        listItems += "<li>"+eventItem +"</li>";
                    }
                    return listItems;
        }));

编辑：还有第四种解决方案：

grid.addColumn(LitRenderer.<String>of(" <ul .innerHTML=${item.html}></ul>")
                .withProperty("html", i -> {
                    List<String> strings = List.of("item 1", "item 2", "item 3");
                    String listItems = "";
                    for (String eventItem : strings) {
                        listItems += "<li>"+eventItem +"</li>";
                    }
                    return listItems;
        }));

下面是一个完整的示例，其中包含 4 种在不使用 TemplateRenderer 的情况下显示示例的方法：

import com.vaadin.flow.component.Html;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.data.renderer.ComponentRenderer;
import com.vaadin.flow.data.renderer.LitRenderer;
import com.vaadin.flow.router.Route;

import java.util.ArrayList;
import java.util.List;
@JsModule("./unsafe-html-component.ts")
@Route("template-grid")
public class GridView extends VerticalLayout {

    public GridView() {
        Grid<String> grid = new Grid<>();
        grid.addColumn(LitRenderer.<String>of(" <ul>" +
                "        ${item.eventItems.map((eventItem) =>" +
                "            html`<li>${eventItem}</li>`\n" +
                "        )}\n" +
                "    </ul>").withProperty("eventItems", i -> {
                    return List.of("item 1", "item 2", "item 3");
        }));
        grid.addColumn(LitRenderer.<String>of(" <unsafe-html-component .html=${item.html}></unsafe-html-component>")
                .withProperty("html", i -> {
                    List<String> strings = List.of("item 1", "item 2", "item 3");
                    String listItems = "";
                    for (String eventItem : strings) {
                        listItems += "<li>"+eventItem +"</li>";
                    }
                    return listItems;
        }));
        grid.addColumn(new ComponentRenderer<>(i -> {
            List<String> strings = List.of("item 1", "item 2", "item 3");
            String listItems = "";
            for (String eventItem : strings) {
                listItems += "<li>"+eventItem +"</li>";
            }
            return new Html("<ul>"+listItems+"</ul>");
        }));
        grid.addColumn(LitRenderer.<String>of(" <ul .innerHTML=${item.html}></ul>")
                .withProperty("html", i -> {
                    List<String> strings = List.of("item 1", "item 2", "item 3");
                    String listItems = "";
                    for (String eventItem : strings) {
                        listItems += "<li>"+eventItem +"</li>";
                    }
                    return listItems;
        }));
        add(grid);

        List<String> strings = new ArrayList<>();
        for (int i = 0; i < 30; i++) {
            strings.add(i + "");
        }

        grid.setItems(strings);
        grid.setSizeFull();
        setSizeFull();
    }
}

github上有一张票，里面有更多解决方案：https://github.com/vaadin/flow-components/issues/2753