Estoy ocupado migrando una aplicación js/html estática a Lit. Estoy encontrando que la plataforma es la más fácil de migrar código estático antiguo a un marco.
Sin embargo, tengo algunos problemas importantes en los que el código renderizado se modifica externamente. Dejame explicar:
render() { return html` ${this.chartsData.map((chart) => html`<div id="chart${row.id}"> <div id="chart_content${row.id}"> </div> </div> )}` }Ahora, más adelante agrego contenido a los divs "chart_content" que se generan a partir de clases externas de jquery o DOM básico, etc. Código muy complejo que no puedo agregar en la función de renderizado. Básicamente creo el contenido de la siguiente manera:
var lineChart = new LineChart(`chart_content_${chartId}`);Portar esto a Lit como un Lit-Element no es posible para mí, ya que las bibliotecas como Plotly JS no son compatibles con Lit.
La representación iluminada se usa básicamente para crear el contenido de "estructura alámbrica" y el detalle se agrega más adelante por ahora.
El problema es que cuando elimino un gráfico de chartsData como:
this.chartsData = this.chartsData.filter(x=>x.id != id);el código de chart_content no se elimina con el resto del div. Se inserta en divisiones de gráfico existentes que no están asociadas con el contenido. Esperaba que Lit eliminara el div chart_content también con el contenedor del gráfico principal, pero no sucede. Esto por supuesto crea estragos. Honestamente, no estoy exactamente seguro de lo que hace, pero estoy 100% seguro de que el contenido no se elimina.
Necesito una forma de decirle a Lit que asocie el subdiv con el div principal y también elimine/mueva el contenido con el div principal cuando sea necesario.
Debe definir su matriz como propiedad.
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>