javascript - 跳过与嵌入元素相邻的特定模板标签的模板数组

Question

我有一组模板:

Template Array

生成数组的代码:

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> 的模板标签始终不会与插入的附加评论合并。

Template Rendering

我曾尝试通过调试器来确定其基础，但没有成功。任何关于原因的建议将不胜感激。

谢谢。

Answer 1

这是无效的:

html`<tr>`

lit-html 模板是独立解析的，这意味着它们必须格式正确才能按预期运行。如果您只有标签的开头，那么它会被解析器关闭。

相反，您需要这样写:

html`<tr>${somethingHere}</tr>`