Предоставляя тонкую оболочку вокруг веб-компонентов, lit-element помогает уменьшить количество шаблонов, необходимых для реакции на изменения свойств и атрибутов. Он также обеспечивает более естественный способ написания html благодаря lit-html, делая веб-компоненты ближе к компонентам React ...
Мы создадим компонент, который извлекает список альбомов, выпущенных данным исполнителем, и отображает их в хронологическом порядке. Мы будем использовать musicbrainz, который предоставляет бесплатный API для извлечения данных. Поскольку TypeScript обрабатывается babel, начиная с версии 7, мы будем использовать babel для транспиляции кода и свертки для обработки сборки.
Создание светового элемента
Просто нужно создать класс и унаследовать его от LitElement, а затем реализовать метод render()
. Этот метод возвращает шаблон html (см. Lit-html). Затем вы можете определить настраиваемый элемент, как и для собственного веб-компонента.
import { LitElement, html, property } from "@polymer/lit-element"; class ArtistReleases extends LitElement { render() {...} } customElements.define('artist-releases', ArtistReleases);
Наблюдаемые свойства
С lit-element есть разные способы обработки свойств. Здесь мы используем геттер статических свойств. Это позволяет нам указывать идентификатор исполнителя и код страны при загрузке компонента, а также отслеживать изменения в свойстве `data`.
static get properties() { return { artistId: { type: String }, data: { type: Array }, country: { type: String } }; }
Получение данных
Используя жизненный цикл веб-компонента, мы можем получить данные, когда компонент добавлен в DOM:
connectedCallback() { super.connectedCallback(); if (this.artistId && this.country) { this.fetchData(); } }
В функции `fetchData ()` мы устанавливаем свойство data
. Поскольку data
находится в списке свойств, он запускает `render ()`
fetchData() { fetch( `//musicbrainz.org/ws/2/artist/${this.artistId}?inc=releases&fmt=json` ) .then(res => res.json()) .then(response => { this.data = response; }) .catch(error => console.error("Error:", error)); }
Рендеринг
Функция рендеринга довольно проста. Если data
не установлен, мы отображаем сообщение «Загрузка», в противном случае мы перебираем данные и используем строковые шаблоны html, как показано ниже:
html`<li>${r.title} ${r.date}</li>`
Вот полная функция render ():
render() { if (!this.data) { return html` <h4>Loading...</h4> `; } const { name, releases } = this.data; const sortedReleases = releases .sort((a, b) => (a.date > b.date ? 1 : b.date > a.date ? -1 : 0)) .filter(rel => rel.country === this.country); return html` <style> :host { font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 16px; padding: 2rem; } ul { list-style: none; padding: 0; margin: 0; } li { line-height: 1.6rem; } </style> <h2>${name}</h2> <ul> ${ sortedReleases.map( r => html` <li>${r.title} ${r.date}</li> ` )} </ul>`} }
Демо: https://lead-giraffe.glitch.me