-1

我正在寻找一种更好的优化解决方案，以便在 Polymer 2.0 中有太多的 if。例如，我正在构建一个表格对象，其中每个单元格可以是文本、按钮、链接、对象等。我希望用户能够输入二维数组并让 Polymer 2.0 对象能够选择要使用的标记。我当前的解决方案（如下）简单有几个 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>
4

1 回答 1

0

如果计算成本matchCellType不高（如果是，您可以在观察者中更新属性并测试属性）

将一系列 if 分解为一个组件，这样您就不会弄乱您的表格

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

您可以命令式地创建和删除节点，而不是用多个 dom-if 标记

于 2017-06-20T07:48:24.517 回答