Vaadin Flow 14.1：TemplateRenderer返回null时如何优化Grid列HTML输出？

我之前也碰到过类似的情况，Polymer模板处理null值时确实会生成这种不够规范的HTML。不过好在TemplateRenderer支持Polymer的模板语法，我们可以用条件渲染来完美解决这个问题。

核心思路就是只有当icon属性存在（不为null）时，才渲染<iron-icon>元素，否则就让单元格为空（或者渲染你想要的空<div>）。具体修改代码如下：

grid.addColumn(TemplateRenderer.<T>of(
    "<template is=\"dom-if\" if=\"[[item.icon]]\">" +
        "<iron-icon icon='[[item.icon.name]]' title='[[item.icon.tooltip]]' style='width: 1em;'></iron-icon>" +
    "</template>"
).withProperty("icon", item -> StatusHint.of(item)));

为什么这样能解决问题？ #

• <template is="dom-if" if="[[item.icon]]">会判断item.icon是否为真值（不为null、undefined等），只有满足条件时才会渲染里面的<iron-icon>。
• 当icon为null时，这个模板块不会被渲染，单元格就会是空的，不会生成带有title="undefined"的无效<iron-icon>元素。

如果你确实想要渲染一个空的<div>而不是完全空的单元格，可以再加一个反向条件的模板：

grid.addColumn(TemplateRenderer.<T>of(
    "<template is=\"dom-if\" if=\"[[item.icon]]\">" +
        "<iron-icon icon='[[item.icon.name]]' title='[[item.icon.tooltip]]' style='width: 1em;'></iron-icon>" +
    "</template>" +
    "<template is=\"dom-if\" if=\"[[!item.icon]]\">" +
        "<div></div>" +
    "</template>"
).withProperty("icon", item -> StatusHint.of(item)));

这样无论icon是否存在，生成的HTML都是规范的，既解决了美观问题，也不用担心潜在的性能损耗~

内容的提问来源于stack exchange，提问作者rmuller