我想使用 LitElement 渲染一些从网络服务器获取的 html 元素

Question

我想从网络服务器获取一些 HTML 元素，并使用 LitElement 在我的网络组件中呈现它们。我的元素保存为 MongoDB 中的字符串，一个元素例如 <div> do something</div>.

我已经使用 XMLHttpRequest 获取了元素，但无法将它们分配给我的属性并呈现它们。

import { LitElement, html } from 'lit-element';
class CassKomponent extends LitElement {
  static get properties() {
    return {
      url: { type: String },
      myArray: { type: Array },
    };
  }
  constructor() {
    super();
    this.url = 'url';
    this.myArray = [];
    this.getResource;
  }
  render() {
    return html`
      <div id="check"></div>
      <div>${this.url}</div>
      <ul>
        ${this.myArray.map((i) => html`<li>${i}</li>`)}
      </ul>
    `;
  }

  getResource() {
    var xhttp = new XMLHttpRequest();
    xhttp.open('GET', this.url, true);
    xhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        var response = JSON.parse(this.responseText);
        console.log(response);
        //tried this one and it doesn't work
        //document.querySelector('.heck').innerHTML = xhttp.responseText;
        this.myArray = response;
      }
    };
    xhttp.send();
  }
}

customElements.define('cass-komponent', CassKomponent);

Answer 1

编辑：

我误会了问题出在哪里，我错过了它在网络请求部分。

如果可能，我会建议使用 fetch() 而不是 XMLHttpRequest()，因为它会使事情更容易编写...并且更容易调试。你会怎么想:

async getResource() {
  let response = await fetch(this.url);
  let jsonResponse = await response.json();
  console.log(jsonResponse);
  this.myArray =jsonResponse;
}

有关 fetch() 的更多信息 MDN site

如果你想渲染一个 HTML 元素（并且你确定它是安全的），你可以在你的渲染中使用来自 lit-html 的 unsafehtml directive。

在您的渲染中，您可以使用：

  render() {
    return html`
      <div id="check"></div>
      <div>${this.url}</div>
      <ul>
        ${this.myArray.map((i) => html`<li>${unsafeHTML(i)}</li>`)}
      </ul>
    `;
  }

这会是您的解决方案吗？

Answer 2

我已经将它改为 fetch 并且它以某种方式工作，但我对此没有任何解释。所以我的最终解决方案是这样的。

render() {
    return html `
        <div id='placeholder'> </div>
    `;
}

async getResource() {
    fetch(this.url)
        .then((response) => response.text())
        .then((responseText) => {
            this.myArray = JSON.parse(responseText);
            this.shadowRoot.getElementById('placeholder').innerHTML = this.myArray;
        })
        .catch((error) => {
            alert("The data could not be fetched");
            console.error(error);
        });
}

我想使用 LitElement 渲染一些从网络服务器获取的 html 元素

I want to render some html elements which I get from my webserver in with LitElement

javascript

lit-element