Лит-элемент со свойствами объектного типа

Как использовать Lit-элемент со свойством Object-type? Я думаю, что определение 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});

РЕДАКТИРОВАТЬ: Спасибо, Мишу, ваш ответ помог мне решить мою проблему. Вот полный рабочий пример, если кто-то хочет знать. Однако есть еще одна вещь, с которой я не мог работать: я не знаю, как декларативно указать начальное значение свойства, если значение является объектом (объект обрабатывается как строка).

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);

my-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);

polymer lit-element
person grohjy    schedule 09.05.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Здесь вы пытаетесь обновить свойство, а не на самом деле, чтобы установить атрибут, и у вас нет reflectToAttribute в свойстве. Но вы можете попробовать использовать просто:

myElement.whales = {nb: 4};

ОБНОВЛЕНИЕ: я вижу, что вы изменили «объем» вопроса ... так что вы должны иметь возможность передавать объект декларативно, если JSON правильный. Вы можете увидеть это в этой демонстрации.

person mishu    schedule 09.05.2018
comment
Спасибо, код заработал. Я отредактировал свой вопрос, включив в него рабочий код. У меня все еще есть один вопрос о свойствах объекта, пожалуйста, посмотрите мой вопрос. - person grohjy; 09.05.2018
comment
@grohjy Я обновил ответ демонстрацией, показывающей значение, полученное извне как JSON .. - person mishu; 10.05.2018
comment
Я думаю, что в моем примере правильный JSON (одинарные и двойные кавычки в нужных местах). Поэтому я считаю, что в lit-element есть некоторая ошибка, потому что json-statement обрабатывается как строка, а не как объект. Спасибо за помощь @mishu - person grohjy; 10.05.2018

arrow_upward
1
arrow_downward

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

Должно было быть <my-e id="mytest2" person='${{"name":"Joe", "age":32}}'></my-e>, если вы используете расширенный. Но эта нотация будет удалена и в настоящее время устарела.

Следовательно, лучшим вариантом было бы написать это как: <my-e id="mytest2" .person={"name":"Joe", "age":32}></my-e>

Подробности можно найти в этой person Phani    schedule 01.08.2018