Polymer 聚合物2.0过多的ifs

我正在寻找一个更好的优化解决方案，使聚合物2.0中的if过多。例如，我正在构建一个表对象，其中每个单元格可以是文本、按钮、链接、对象等。我希望用户能够输入2D数组，并让Polymer 2.0对象能够选择要使用的标记。我当前的解决方案（如下）simple有几个if语句，但这意味着每个单元格if都将调用每个语句。有没有更好的方法来处理这个问题

<template is="dom-if" if="[[matchCellType(cell, 'button')]]">
    <UI-Button id='[[cell.button.ID]]' class$='[[cell.button.class]]'>[[cell.button.text]]</UI-Button>
</template>
<template is="dom-if" if="[[matchCellType(cell, 'object')]]">
    <span class="object-toggle"></span>[[cell.title]]
    <div class="properties">
        <template is="dom-repeat" items="[[getProps(cell)]]">
            <div class="properties_row"><div class="properties_cell"><b>[[item.title]]:</b></div><div style="display: table-cell">[[item.val]]</div></div>
        </template>
    </div>
</template>
<template is="dom-if" if="[[matchCellType(cell, 'link')]]">
    <a target="_blank" href='[[cell.link.href]]'>[[cell.link.text]]</a>
</template>
<template is="dom-if" if="[[matchCellType(cell, 'cell')]]">
    [[cell]]
</template>
<template is="dom-if" if="[[matchCellType(cell, 'textArea')]]">
    <ui-text-area rows="[[cell.textArea.rows]]" cols="[[cell.textArea.cols]]" id='[[cell.textArea.id]]' class$='[[cell.textArea.class]]' text=    [[cell.textArea.text]]></ui-text-area>
</template>

[[cell.button.text]]
[[cell.title]]
[[item.title]]：[[item.val]]
[[单元]]

大量调用

matchCellType

如果不是一个代价高昂的计算，也不会有什么坏处（如果是这样，您可以在观察者中更新一个属性，并对该属性进行测试）

将一系列的ifs分解成一个组件，这样您就不会把表弄得乱七八糟

作为使用dom ifs的替代方法，可以从单元格中计算属性或样式类，始终呈现所有元素，并使用CSS仅使匹配的元素可见。这会产生更多的DOM元素，但性能可能仍然更高，因为浏览器非常有效地处理

隐藏的
或
显示：无
元素

您可以强制创建和删除节点，而不必使用多个dom ifs来加盖图章
谢谢您的帮助！我最初尝试为行和单元格使用一个子组件，但整个表看起来都错了，这是一个很好的建议，我仍计划实施。matchCellType是一组简单的ifs。渲染所有东西并隐藏它们是我从未想过的事情，这是一个好主意。我主要担心的是这种结构是缓慢和低效的。实际上，就性能而言，它工作得很好，即使使用大型数据集也是如此。我有点想在这里面添加更多的if，但这似乎是一个糟糕的解决方案。。。有些人甚至会做
，如果仔细做，效果会很好