如何将 JSON 对象字符串文字传递到 LitElement

Question

我正在研究以下是否可行。

我的服务器端代码将驱动（Web）组件的数据序列化为 JSON 对象，然后可以将其呈现为服务器作为字符串生成的 HTML。我想将这个 stringified JSON 对象传递给我的 LitElement Web 组件，并让我的 LitElement 组件自动将字符串反序列化为原生 JavaScript 对象。

例如：

来自服务器的 HTML 将生成：

<my-lit-element myData="{\"hello\": \"world\"}"/>

我希望我的 LitElement（使用 Typescript）能够执行以下操作：

@customElement('my-lit-element')
export class MyLitElement extends LitElement {
    @property({type: String) myData = '{}'

    render() {
        return html`
        <div>${this.myData.hello}</div>
    `;
    }   
}

这可能吗？

回答为什么我不只是为每个 myData 键创建一个 LitElement 属性的问题：我有许多实例，其中 myData 的属性可能包含其他多属性对象的列表，我需要以某种方式传递到LitElement，这样它就可以遍历它们并呈现它们的内容。

我在这里找到的答案似乎解决了在渲染方法中绑定 JavaSCript 对象的问题，而不是将 IN 字符串 JS 对象（通过 HTML）传递给 LitElement。

Answer 1

LitElement 有一些默认转换器，例如它自动使用 JSON.parse 的对象

在文档中查看更多详细信息 https://lit-element.polymer-project.org/guide/properties#conversion-type

所以如果你有这样的 html

注意：自定义元素不能按照规范自动关闭

注意：在 html 中转义引号并不是真正的事情 - 您需要使用 " 代替

<my-lit-element myData="{&quot;hello&quot;: &quot;world&quot;}"></my-lit-element>

那么你只需要将字符串转换为对象，只需将其定义为对象

@customElement('my-lit-element')
export class MyLitElement extends LitElement {
    @property({type: Object) myData = '{}'

    render() {
        console.log(this.myData); // { hello: 'world' } 
        return html`
          <div>${this.myData.hello}</div>
        `;
    }   
}

如果需要更多自定义转换，您可以提供自己的converter https://lit-element.polymer-project.org/guide/properties#conversion-converter

现场演示：

<h1>My Demo</h1>

<my-lit-element myData="{&quot;hello&quot;: &quot;world&quot;}"></my-lit-element>

<script type="module">
import { LitElement, html } from 'https://unpkg.com/lit-element?module';
export class MyLitElement extends LitElement {
  static get properties() {
    return {
      myData: { type: Object }
    };
  }

  constructor() {
    super();
    this.myData = {};
  }

  render() {
    console.log(this.myData); // { hello: 'world' } 
    return html`
      <div>${this.myData.hello}</div>
    `;
  }
}
customElements.define('my-lit-element', MyLitElement);
</script>