ポリマー2.0があまりにも多くifs

Question

ポリマー2.0でifをあまりにも多く持つために、より最適化されたソリューションを探しています。例えば、私はテーブルオブジェクトを構築しています。ここでは、各セルはテキスト、ボタン、リンク、オブジェクトなどです。ユーザーが2D配列を入力し、Polymer 2.0オブジェクトで使用するマークアップを選択できるようにします。私の現在の解決法（下記）は単純なif文をいくつか持っていますが、これはすべてのセルが各文を呼び出すことを意味します。これを処理するより良い方法はありますか？ matchCellTypeへの呼び出しの

<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> 

Answer 1

多く、それはコストのかかる計算でない場合は害はありません（それがあった場合、あなたの代わりに財産上の観測者とテストにプロパティを更新する可能性が）うち

ファクターあなたのテーブルを乱雑にしないでください。

dom-ifsを使用する代わりに、セルから属性またはスタイルクラスを計算し、すべての要素を常にレンダリングし、CSSを使用して一致する要素が表示されます。これは、はるかにDOM要素を生成しますが、ブラウザは非常に効率的にhiddenまたはdisplay:none要素を扱う

の代わりに、いくつかのDOM-IFSとスタンプので、まだよりパフォーマンスすることができ、あなたが作成し、助けを命令的