Lit

Question

我正忙于将静态 js/html 应用程序迁移到 Lit。我发现该平台是最容易将旧静态代码迁移到框架的平台。

但是，我遇到了一些大问题，其中呈现的代码在外部被修改。让我解释一下：

  render() {

    return html`

    ${this.chartsData.map((chart) =>

        html`<div id="chart${row.id}">
          <div id="chart_content${row.id}">
          </div> 
        </div>
      
      )}`
}

现在，稍后我将内容添加到“chart_content”div，这些内容是从 jquery 或基本 DOM 的外部类生成的等等。非常复杂的代码，我无法在渲染函数中添加。基本上我创建的内容如下：

var lineChart = new LineChart(`chart_content_${chartId}`);

我无法将其作为 Lit 元素移植到 Lit，因为 Plotly JS 等库不支持 Lit。

光照渲染主要用于创建“线框”内容，细节稍后添加。

问题是，当我从 chartsData 中删除图表时，例如：

this.chartsData = this.chartsData.filter(x=>x.id != id);

chart_content 中的代码不会与 div 的其余部分一起删除。它被推送到与内容无关的现有图表 div 中。我预计 Lit 会删除 chart_content div 以及主图表容器，但它并没有发生。这当然会造成破坏。老实说，我不太确定它的作用，但我 100% 确定内容没有被删除。

我需要一种方法来告诉 Lit 将子 div 与主 div 相关联，并且在需要时 delete/move 将内容与主 div 相关联.

Answer 1

您需要将数组定义为属性。

function add() {
  const list = document.getElementById('list');
  list.addOne();
}

function rm() {
  const list = document.getElementById('list');
  list.removeOne();
}

<script type="module">
import {
  LitElement,
  css
} from "https://unpkg.com/lit-element/lit-element.js?module";
import {html, unsafeStatic} from "https://unpkg.com/lit/static-html.js?module";
import {repeat} from "https://unpkg.com/lit/directives/repeat.js?module";

class MyList extends LitElement {
  
  static get properties() {
    return {
      chartsData: {type: Array},
    };
  }
  
  constructor() {
    super();
    this.chartsData = [
      {id: 1, html: '<div style="background-color: blue">1</div>'},
      {id: 2, html: '<div style="background-color: red">2</div>'},
      {id: 3, html: '<div style="background-color: blue">3</div>'},
      {id: 4, html: '<div style="background-color: red">4</div>'},
      {id: 5, html: '<div style="background-color: blue">5</div>'},
      {id: 6, html: '<div style="background-color: red">6</div>'},
    ];
  }
  
  removeOne() {
    this.chartsData.pop();
    this.chartsData = [...this.chartsData];
  }
  
  addOne() {
    const id = this.chartsData.length + 1;
    const html = `<div style="background-color: ${id % 2 ? 'blue' : 'red'}">${id}</div>`;
    this.chartsData.push({id, html})
    this.chartsData = [...this.chartsData];
  }
  
  render() {
    return html`
      ${repeat(this.chartsData, (row, index) => html`<div id="chart${row.id}">
              <div id="chart_content${row.id}">${unsafeStatic(row.html)}</div> 
             </div>`
      )}`
  }
}

customElements.define("my-list", MyList);
</script>
<br/>
<button onclick="add()">Add</button>
<button onclick="rm()">Remove</button>
<br/>
<my-list id=list></my-list>

Lit - 渲染功能不是 deleting/updating 手动子内容

Lit - Render function not deleting/updating manual sub-content

javascript

node.js

lit-element

lit-html