我有一组模板:
生成数组的代码:
generate_cell_collection() {
const templates = this.matrix_data.map((item, index) => {
var template_frag = [];
var row = Math.floor(index / this.nrow);
var col = index % this.ncol;
var row_length = Math.floor(this.matrix_data.length / this.nrow);
var cell_indices = '(' + row + ',' + col + ')';
var updated = false;
this.cell_collection.set(cell_indices, this.matrix_data[row * row_length + col]);
if (col === 0) { template_frag.push(html`<tr>`); }
template_frag.push(html`<cell-display .cell_indices=${cell_indices}
.cell_value=${this.matrix_data[row * row_length + col]}
updated=${updated}></cell-display>`);
if (col === this.ncol - 1) { template_frag.push(html`</tr>`); }
return template_frag;
}).flat();
return templates;
}
render() {
var templates = this.generate_cell_collection();
return html`
<div id=${this.descriptor}>
<table>
<tbody>
${templates}
</tbody>
</table>
</div>
`;
}
和嵌入元素的代码:
export class CellDisplay extends LitElement {
static get properties() {
return {
cell_indices: { type: String },
cell_value: { type: Number },
updated: { type: Boolean}
}
}
constructor() {
super();
}
render() {
return html`
<td><div id=${this.cell_indices}></div>${this.cell_value}</td>`;
}
}
但是,在呈现模板时,包含</tr>
标签的模板始终没有与插入的附加注释合并。
我试图通过调试器来确定其基础,但没有成功。任何关于为什么的建议将不胜感激。
谢谢你。