Визуализация объекта с использованием lit.html - PullRequest
Новая
       6

Визуализация объекта с использованием lit.html

0 голосов
/ 20 сентября 2018

Сценарий:

Внутри моего веб-компонента - health-check.js Файл, который у меня есть: 

  static get properties() {
    return {
      plan:Object,
    };
  }

 <div class="body"><p class="title">${this.plan.title}</p></div>

и
Внутримой index.html файл, который я передаю json, как показано ниже: 

<health-check plan='{ "title" : "Solution Architecure",
 "status" : "Approved" }'></health-check>

, но он не отображает заголовок в моем компоненте проверки состояния


Проблема:

  • Визуализация значения объекта с использованием lit.html?

  • Визуализация заголовка внутри моего компонента проверки работоспособности.

    Любые идеи?

1 Ответ

0 голосов
/ 26 сентября 2018

Я думаю, вы не можете передать объект из html-файла, потому что это просто html, а не lit-element или lit-html, а lit-html, кажется, не пытается разобрать значение в этом случае ( Update Я только что нашел другойспособ определения свойства см. ниже).Но, конечно, вы все равно можете передать строку и разобрать ее внутри элемента.

В index.html 

<health-check planString='{
  "title": "Solution Architecure",
  "status": "Approved"
}'>
</health-check>

В health-check.js 

class HealthCheck extends LitElement {
  static get properties () {
    return {
      planString: String
    }
  }

  render () {
    return html`
      <div class='body'>
        <p class='title'>${JSON.parse(this.planString).title}</p>
      </div>
    `
  }
}

Но ярекомендовал бы обернуть ваш код в одну точку входа, как элемент my-app

в index.html 

<my-app></my-app>

в app.js 

class App extends LitElement {
  render () {
    return html`
      <health-check .plan='${{
        title: 'Solution Architecure',
        status: 'Approved'
      }}'>
      </health-check>
    `
  }
}

в проверке работоспособности.js 

class HealthCheck extends LitElement {
  static get properties () {
    return {
      plan: Object
    }
  }

  constructor () {
    super()
    this.plan = {}
  }

  render () {
    return html`
      <div class='body'>
        <p class='title'>${this.plan.title}</p>
      </div>
    `
  }
}

Обновление

Вы можете определить тип свойства, чтобы указать lit-элементу, как сериализовать и десериализовать. 

class HealthCheck extends LitElement {
  static get properties () {
    return {
      plan: {
        type: {
          fromAttribute (value) {
            return JSON.parse(value)
          }
        }
      }
    }
  }

  render () {
    return html`
      <div class='body'>
        <p class='title'>${this.plan.title}</p>
      </div>
    `
  }
}

Примечание: Этот код написан в lit-element 0.6.x и lit-html 0.11.x

...