TemplateRenderer 内的内联 (?) HTML 格式化

Question

我只是在寻找一种在 Vaadin 14 Grid TemplateRenderers 中使用基本 HTML 格式的技术。

我使用了许多 ComponentRenderer，我想将其更改为 TemplateRenderer 以提高性能。

我的问题是我在文本中有很多“自由格式”HTML 格式，这在 ComponentRenderer 中很容易做到，例如 ...

new Span(new Html("Some formatted text"));

通过 TemplateRenderer withProperty(...) 将其放入的常规语法或技术是什么？

我认为只需要它来完成与new Html(...)

相同的工作

非常感谢任何信息。

Answer 1

TemplateRenderer 接受任何 HTML，就像 new Html() 一样。唯一的区别是您可以绑定通过 withProperty() 传入的属性。在你的情况下，你似乎不需要任何属性。

要使用上面的示例，您可以执行以下操作：

grid.addColumn(TemplateRenderer.of("<span><p>Some <b> formatted </b>text</p></span>"));

在文档页面 https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid#using-template-renderers

上阅读有关 TemplateRenderer 的更多信息

PS。将  放在  标签内违反了 HTML 规范（内联元素内的块元素）。

Answer 2

有一个使 TemplateRenderer 使用它接收到的数据作为 HTML 的肮脏技巧，那就是将其分配为 innerHTML 属性包装元素。这又需要另一个肮脏的技巧，即 Polymer 在 CamelCase 和 dash-case 之间转换的方式，用于在不区分大小写的属性名称和区分大小写的属性名称之间进行转换。

在展示该示例之前，我也觉得有必要警告您不要将用户提供的数据显示为 HTML，因为这是导致 跨站点脚本漏洞的极好方法 在您的应用程序中。

除此之外，一个简单的工作示例如下：

grid.addColumn(TemplateRenderer.<MyItem> of("<div inner-h-t-m-l='{{item.html}}'><div>")
  .withProperty("html", item -> "<i>Hello</i>"));

TemplateRenderer 内的内联 (?) HTML 格式化

Inline (?) HTML formatting inside a TemplateRenderer

vaadin-grid

vaadin-flow