Spec-Zone.ru › Lit 3

Пользовательские директивы

класс AsyncDirectiveИсточник

Абстрактный базовый класс Directive, метод disconnected которого вызывается, когда часть, содержащая директиву, очищается в результате повторного рендеринга или когда пользователь вызывает part.setConnected(false) для части, ранее отрендеренной с этой директивой (например, когда LitElement отключается от DOM).

Импорт

import { AsyncDirective } from 'lit/async-directive.js';

Подробности

Если впоследствии для содержащей директиву части вызывается part.setConnected(true), метод reconnected директивы будет вызван перед её следующими обратными вызовами update/render. При реализации disconnected для совместимости с повторным подключением также следует реализовать reconnected. Обратите внимание, что обновления могут происходить, пока директива отключена. Поэтому во время рендеринга/обновления директивам обычно следует проверять флаг this.isConnected, чтобы определить, безопасно ли подписываться на ресурсы, которые могут препятствовать сборке мусора.

Методы и свойства

new AsyncDirective(_partInfo): AsyncDirective

Параметры
_partInfo
PartInfo

isConnected: booleanИсточник

Состояние подключения этой директивы.

disconnected(): voidИсточник

Пользовательские обратные вызовы для реализации логики освобождения ресурсов/подписок, которые могли быть сохранены этой директивой. Поскольку директивы также могут подключаться повторно, следует также реализовать reconnected, чтобы восстановить рабочее состояние директивы до следующего рендеринга.

reconnected(): voidИсточник

render(props): unknownИсточник

Параметры
props
Array<unknown>

setValue(value): voidИсточник

Устанавливает значение Part директивы вне обычного жизненного цикла update/render директивы.

Параметры
value
unknown

Устанавливаемое значение

Подробности

Этот метод не следует вызывать синхронно из update или render директивы.

update(_part, props): unknownИсточник

Параметры
_part
Part
props
Array<unknown>

класс AttributePartИсточник

Импорт

import { AttributePart } from 'lit/async-directive.js';

Методы и свойства

new AttributePart(element, name, strings, parent, options): AttributePart

Параметры
element
HTMLElement
name
string
strings
ReadonlyArray<string>
parent
Disconnectable
options
undefined | RenderOptions

readonly element: HTMLElementИсточник

readonly name: stringИсточник

readonly options: undefined | RenderOptionsИсточник

readonly strings?: ReadonlyArray<string>Источник

Если эта часть атрибута представляет собой интерполяцию, здесь содержатся статические строки интерполяции. Для привязок с одним значением, охватывающих всё выражение, это значение равно undefined.

readonly type: 1 | 3 | 4 | 5Источник

tagName: stringИсточник

класс BooleanAttributePartИсточник

Импорт

import { BooleanAttributePart } from 'lit/async-directive.js';

Методы и свойства

new BooleanAttributePart(element, name, strings, parent, options): BooleanAttributePart

Параметры
element
HTMLElement
name
string
strings
ReadonlyArray<string>
parent
Disconnectable
options
undefined | RenderOptions

readonly element: HTMLElementИсходный код

readonly name: stringИсходный код

readonly options: undefined | RenderOptionsИсходный код

readonly strings?: ReadonlyArray<string>Исходный код

Если эта часть атрибута представляет собой интерполяцию, здесь содержатся статические строки интерполяции. Для привязок с одним значением, охватывающих всё выражение, здесь указано undefined.

readonly type: 4Исходный код

tagName: stringИсходный код

класс ChildPartИсходный код

Импорт

import { ChildPart } from 'lit/async-directive.js';

Методы и свойства

new ChildPart(startNode, endNode, parent, options): ChildPart

Параметры
startNode
ChildNode
endNode
null | ChildNode
parent
undefined | ChildPart | TemplateInstance
options
undefined | RenderOptions

readonly options: undefined | RenderOptionsИсточник

readonly type: 2Источник

endNode: null | NodeИсточник

Конечный узел-маркер этой части, если он есть. Дополнительные сведения см. в .parentNode.

parentNode: NodeИсточник

Родительский узел, в который часть выводит содержимое.

Подробности

Содержимое ChildPart состоит из диапазона смежных дочерних узлов .parentNode, возможно, ограниченного «узлами-маркерами» (.startNode и .endNode).

  • Если оба значения .startNode и .endNode не равны null, содержимое части состоит из всех соседних узлов между .startNode и .endNode, не включая их.
  • Если значение .startNode не равно null, а .endNode равно null, содержимое части состоит из всех соседних узлов после .startNode вплоть до последнего дочернего узла .parentNode включительно. Если .endNode не равно null, то .startNode всегда будет не равно null.
  • Если оба значения .endNode и .startNode равны null, содержимое части состоит из всех дочерних узлов .parentNode.

startNode: null | NodeИсточник

Начальный узел-маркер этой части, если он есть. Дополнительные сведения см. в .parentNode.

функция directiveИсточник

Создает пользовательскую функцию директивы на основе класса Directive. Эта функция принимает те же параметры, что и метод render() директивы.

Импорт

import { directive } from 'lit/async-directive.js';

Сигнатура

directive(c): (values: Parameters<InstanceType<C>["render"]>) => DirectiveResult<C>

Параметры

c
C

класс DirectiveИсточник

Базовый класс для создания пользовательских директив. Пользователям следует расширить этот класс, реализовать render и/или update, а затем передать подкласс в directive.

Импорт

import { Directive } from 'lit/async-directive.js';

Методы и свойства

new Directive(_partInfo): Directive

Параметры
_partInfo
PartInfo

render(props): unknownИсточник

Параметры
props
Array<unknown>

update(_part, props): unknownИсточник

Параметры
_part
Part
props
Array<unknown>

класс ElementPartИсточник

Импорт

import { ElementPart } from 'lit/async-directive.js';

Методы и свойства

new ElementPart(element, parent, options): ElementPart

Параметры
element
Element
parent
Disconnectable
options
undefined | RenderOptions

element: ElementИсходный код

options: undefined | RenderOptionsИсходный код

readonly type: 6Исходный код

класс EventPartИсходный код

Импорт

import { EventPart } from 'lit/async-directive.js';

Методы и свойства

new EventPart(element, name, strings, parent, options): EventPart

Параметры
element
HTMLElement
name
string
strings
ReadonlyArray<string>
parent
Disconnectable
options
undefined | RenderOptions

readonly element: HTMLElementИсходный код

readonly name: stringИсходный код

readonly options: undefined | RenderOptionsИсходный код

readonly strings?: ReadonlyArray<string>Исходный код

Если эта часть атрибута представляет интерполяцию, она содержит статические строки этой интерполяции. Для привязок с одним значением и полным соответствием значением будет undefined.

readonly type: 5Исходный код

tagName: stringИсходный код

handleEvent(event): voidИсходный код

Параметры
event
Event

значение PartTypeИсходный код

Импорт

import { PartType } from 'lit/async-directive.js';

Тип

{ATTRIBUTE: 1, BOOLEAN_ATTRIBUTE: 4, CHILD: 2, ELEMENT: 6, EVENT: 5, PROPERTY: 3}

класс PropertyPartИсходный код

Импорт

import { PropertyPart } from 'lit/async-directive.js';

Методы и свойства

new PropertyPart(element, name, strings, parent, options): PropertyPart

Параметры
element
HTMLElement
name
string
strings
ReadonlyArray<string>
parent
Disconnectable
options
undefined | RenderOptions

readonly element: HTMLElementИсходный код

readonly name: stringИсходный код

readonly options: undefined | RenderOptionsИсходный код

readonly strings?: ReadonlyArray<string>Исходный код

Если эта часть атрибута представляет собой интерполяцию, здесь содержатся статические строки интерполяции. Для привязок с одним значением, завершённых привязок, здесь указано undefined.

readonly type: 3Исходный код

tagName: stringИсходный код

type AttributePartInfoИсходный код

Импорт

import { AttributePartInfo } from 'lit/async-directive.js';

Методы и свойства

readonly name: stringИсходный код

readonly strings?: ReadonlyArray<string>Исходный код

readonly tagName: stringИсходный код

readonly type: 1 | 3 | 4 | 5Исходный код

type ChildPartInfoИсходный код

Импорт

import { ChildPartInfo } from 'lit/async-directive.js';

Методы и свойства

readonly type: 2Исходный код

type DirectiveClassИсходный код

Импорт

import { DirectiveClass } from 'lit/async-directive.js';

Методы и свойства

new Directive(part): DirectiveИсходный код

Параметры
part
PartInfo

type DirectiveParametersИсходный код

Этот вспомогательный тип извлекает сигнатуру метода render() класса директивы, чтобы использовать её в качестве типа сгенерированной функции директивы.

Импорт

import { DirectiveParameters } from 'lit/async-directive.js';

Тип

Parameters<C["render"]>

тип DirectiveResultИсточник

Сгенерированная функция директивы не вычисляет директиву, а лишь возвращает объект DirectiveResult, содержащий аргументы.

Импорт

import { DirectiveResult } from 'lit/async-directive.js';

тип ElementPartInfoИсточник

Импорт

import { ElementPartInfo } from 'lit/async-directive.js';

Методы и свойства

readonly type: 6Источник

тип PartИсточник

Импорт

import { Part } from 'lit/async-directive.js';

Тип

ChildPart | AttributePart | PropertyPart | BooleanAttributePart | ElementPart | EventPart

тип PartInfoИсточник

Информация о части, к которой привязана директива.

Импорт

import { PartInfo } from 'lit/async-directive.js';

Тип

ChildPartInfo | AttributePartInfo | ElementPartInfo

Подробности

Это полезно для проверки того, что директива привязана к допустимой части, например, для директивы, которую можно использовать только в привязках атрибутов.

функция clearPartИсточник

Импорт

import { clearPart } from 'lit/directive-helpers.js';

Сигнатура

clearPart(part): void

Параметры

part
ChildPart

функция getCommittedValueИсточник

Возвращает зафиксированное значение ChildPart.

Импорт

import { getCommittedValue } from 'lit/directive-helpers.js';

Сигнатура

getCommittedValue(part): unknown

Параметры

part
ChildPart

Подробности

Зафиксированное значение используется для обнаружения изменений и эффективного обновления части. Оно может отличаться от значения, заданного шаблоном или директивой, если значение шаблона преобразуется перед фиксацией.

  • TemplateResult фиксируются как TemplateInstance
  • Итерируемые объекты фиксируются как Array<ChildPart>
  • Все остальные типы фиксируются как значение шаблона либо значение, возвращённое или заданное директивой.

функция getDirectiveClassИсточник

Получает класс Directive для DirectiveResult

Импорт

import { getDirectiveClass } from 'lit/directive-helpers.js';

Сигнатура

getDirectiveClass(value): undefined | DirectiveClass

Параметры

value
unknown

функция insertPartИсточник

Вставляет ChildPart в DOM указанного контейнера ChildPart: в конец контейнера ChildPart или перед необязательным refPart.

Импорт

import { insertPart } from 'lit/directive-helpers.js';

Сигнатура

insertPart(containerPart, refPart?, part?): ChildPart

Параметры

containerPart
ChildPart

Часть, в которую нужно добавить новую ChildPart

refPart?
ChildPart

Часть, перед которой нужно добавить новую ChildPart; если параметр не указан, часть добавляется в конец containerPart

part?
ChildPart

Вставляемая часть или undefined, чтобы создать новую часть

Подробности

Эта функция не добавляет часть к зафиксированному значению containerPart. Это должны делать вызывающие функции.

функция isDirectiveResultИсточник

Проверяет, является ли значение DirectiveResult.

Импорт

import { isDirectiveResult } from 'lit/directive-helpers.js';

Сигнатура

isDirectiveResult(value): value

Параметры

value
unknown

функция isPrimitiveИсточник

Проверяет, является ли значение примитивным.

Импорт

import { isPrimitive } from 'lit/directive-helpers.js';

Сигнатура

isPrimitive(value): value

Параметры

value
unknown

Подробности

См. https://tc39.github.io/ecma262/#sec-typeof-operator

функция isSingleExpressionИсточник

Проверяет, содержит ли часть только одно выражение без строк для интерполяции между ними.

Импорт

import { isSingleExpression } from 'lit/directive-helpers.js';

Сигнатура

isSingleExpression(part): boolean

Параметры

part
PartInfo

Подробности

Только AttributePart и PropertyPart могут содержать несколько выражений. Части с несколькими выражениями имеют свойство strings, а части с одним выражением — нет.

функция isTemplateResultИсходный код

Проверяет, является ли значение TemplateResult.

Импорт

import { isTemplateResult } from 'lit/directive-helpers.js';

Сигнатура

isTemplateResult(value, type?): value

Параметры

value
unknown
type?
TemplateResultType

функция removePartИсходный код

Удаляет ChildPart из DOM вместе со всем его содержимым.

Импорт

import { removePart } from 'lit/directive-helpers.js';

Сигнатура

removePart(part): void

Параметры

part
ChildPart

Часть, которую нужно удалить

функция setChildPartValueИсходный код

Задаёт значение части.

Импорт

import { setChildPartValue } from 'lit/directive-helpers.js';

Сигнатура

setChildPartValue(part, value, directiveParent?): T

Параметры

part
T

Часть, которой нужно задать значение

value
unknown

Задаваемое значение

directiveParent?
DirectiveParent

Используется внутри библиотеки; не следует задавать пользователю

Подробности

Обратите внимание: эту функцию следует использовать только для задания или обновления значения созданных пользователем частей (то есть частей, созданных с помощью insertPart); директивам не следует использовать её для задания значения части-контейнера директивы. Чтобы обновить состояние своей части, директивы должны возвращать значение из update/render. Директивам, которым необходимо асинхронно задавать значение своей части, следует расширить AsyncDirective и вызвать this.setValue().

функция setCommittedValueИсходный код

Напрямую задаёт зафиксированное значение ChildPart, не запуская этап фиксации части.

Импорт

import { setCommittedValue } from 'lit/directive-helpers.js';

Сигнатура

setCommittedValue(part, value?): unknown

Параметры

part
Part
value?
unknown

Подробности

Это полезно в случаях, когда директиве необходимо обновить часть так, чтобы при следующем обновлении было обнаружено изменение значения или его отсутствие. Если значение не указано, при следующем обновлении изменение гарантированно будет обнаружено.

значение TemplateResultTypeИсходный код

Импорт

import { TemplateResultType } from 'lit/directive-helpers.js';

Тип

{HTML: 1, SVG: 2}

значение noChangeИсходный код

Специальное значение, которое указывает, что значение обработано директивой и не должно записываться в DOM.

Импорт

import { noChange } from 'lit';

Тип

symbol

© Google LLC
Licensed under the Creative Commons Attribution 3.0 Unported License.
https://lit.dev/docs/api/custom-directives/

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API