小编Bra*_*don的帖子

使用 Vaadin LitRenderer 的动态 HTML

使用 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>
  */
Run Code Online (Sandbox Code Playgroud)

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

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

谢谢

更新:2021.3.2 修复示例代码

vaadin vaadin-grid vaadin-flow lit vaadin22

5
推荐指数
1
解决办法
2207
查看次数

标签 统计

lit ×1

vaadin ×1

vaadin-flow ×1

vaadin-grid ×1

vaadin22 ×1