1

我有一组模板:

模板数组

生成数组的代码:

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>标签的模板始终没有与插入的附加注释合并。

模板渲染

我试图通过调试器来确定其基础,但没有成功。任何关于为什么的建议将不胜感激。

谢谢你。

4

1 回答 1

2

这是无效的:

html`<tr>`

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

相反,您需要编写:

html`<tr>${somethingHere}</tr>`
于 2019-09-26T23:29:16.687 回答