使用Vaadin LitRenderer的动态HTML
使用Vaadin LitRenderer的动态HTML
提问于 2022-03-01 01:33:05
使用Vaadin 22+
我试图使用LitRenderer在Vaadin中显示一些动态的html。
这以前可以使用现在不再推荐的TemplateRenderer 利用这个黑客来实现。
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来实现此操作的方法？我看到点燃模板本身就是为了这种目的而使用unsafeHTML指令的。但我没有运气想让它或其他方法起作用。
谢谢
更新: 2021.3.2以修复示例代码
回答 1
Stack Overflow用户
发布于 2022-03-02 07:51:58
您可以在不使用unsafeHTML的情况下使用点燃渲染器来呈现示例：
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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71302820
复制相关文章
相似问题
腾讯云开发者
