具有对象类型属性的Lit元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了具有对象类型属性的Lit元素相关的知识,希望对你有一定的参考价值。

如何使用具有Object-type属性的Lit-element?我认为定义myelement有效:

static get properties() {
    return {
        whales:Object
    }
}
constructor() {
    super();
    this.whales={"nb":0};
}

html,这也有效:

       <my-element id="mytest" whales='{"nb":2}'></my-element>

但我不能让setAttribute工作:

myElement.setAttribute("whales", {"nb":4});

编辑:谢谢你mishu,你的回答帮助我解决了我的问题。如果有人想知道,这是完整的工作示例。但是仍有一件事我无法工作:如果值是一个对象(对象被处理为字符串),我不知道如何以声明方式给出属性初始值。

index.html的:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lit-html test</title>
</head>
<body>
  <script type="module" src="./components/my-e.js"></script>

  <button id="reset" onclick="reset()">reset</button>
  <p>1 works: <my-e id="mytest"></my-e></p>
  <p>2 doesn't work: <my-e id="mytest2" person='{"name":"Joe", "age":32}'></my-e></p>
  <script src="main.js"></script>
</body>
</html>

main.js:

     function updatePerson(e) {
  var myE = e.target;
  myE.person = e.detail;
  myE._requestRender();
}
function reset() {
  var p = { "name": "Jack", "age": 20 };
  var myE = document.getElementById('mytest');
  myE.person = p;
  myE._requestRender();

  myE = document.getElementById('mytest2');
  myE.person = p;
  myE._requestRender();
}
document.getElementById('mytest').addEventListener('person', updatePerson);
document.getElementById('mytest2').addEventListener('person', updatePerson);

我-e.js:

import { LitElement, html } from './lit-element.js';
class MyE extends LitElement {
  static get properties() {
    return {
      person: Object
    }
  }
  constructor() {
    super();
    this.person = { "name": "Paul", "age": 40 };
    this.addEventListener('click', async (e) => {
      await this.renderComplete;
      var p = {};
      p.name = this.person.name + ", a";
      p.age = this.person.age + 1;
      this.dispatchEvent(new CustomEvent('person', { detail: p }))
    });
  }
  _render({ person }) {
    return html`
         <p> Name: ${person.name}</p>
         <p>Age: ${person.age}</p>
    `;
  }
}
customElements.define('my-e', MyE);
答案

在那里,您尝试更新属性,而不是真正设置属性,并且您没有在属性上使用reflectToAttribute。但你可以尝试简单地使用:

myElement.whales = {nb: 4};

更新:我看到你改变了问题的“范围”..所以,只要JSON是正确的,你应该能够以声明方式传递一个对象。你可以在this demo看到它。

另一答案

<my-e id="mytest2" person='{"name":"Joe", "age":32}'></my-e>

应该是<my-e id="mytest2" person='${{"name":"Joe", "age":32}}'></my-e>如果你使用lit-extended。但是这种表示法将被删除,目前已被弃用。

因此,更好的选择是将其写为:<my-e id="mytest2" .person={"name":"Joe", "age":32}></my-e>

你可以在这个documentation找到细节

以上是关于具有对象类型属性的Lit元素的主要内容,如果未能解决你的问题,请参考以下文章

二、ndarray 的属性、数据类型

首先是实体框架代码。如何将对象类型文件的列表添加到已具有该类型属性的对象

js代码片段

一个具有两种显示类型的片段[关闭]

如何将具有元素数组的每个对象的对象列表转换为具有子元素作为属性的对象数组

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段