Spec-Zone.ru › Lit 2

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

класс 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, чтобы определить, безопасно ли подписываться на ресурсы, которые могут препятствовать сборке мусора.

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

новый 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';

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

новый AttributePart(element, name, strings, parent, options): AttributePart

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

только для чтения element: HTMLElementИсточник

только для чтения name: stringИсточник

только для чтения options: undefined | RenderOptionsИсточник

только для чтения strings?: ReadonlyArray<string>Источник

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

только для чтения type: 1 | 3 | 4 | 5Источник

tagName: stringИсточник

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

Импорт

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

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

новый BooleanAttributePart(element, name, strings, parent, options): BooleanAttributePart

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

только для чтения element: HTMLElementИсточник

только для чтения name: stringИсточник

только для чтения options: undefined | RenderOptionsИсточник

только для чтения strings?: ReadonlyArray<string>Источник

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

только для чтения type: 4Источник

tagName: stringИсточник

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

Импорт

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

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

новый ChildPart(startNode, endNode, parent, options): ChildPart

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

только для чтения options: undefined | RenderOptionsИсточник

только для чтения 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';

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

новый 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';

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

новый ElementPart(element, parent, options): ElementPart

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

element: ElementИсточник

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

только для чтения type: 6Источник

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

Импорт

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

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

новый EventPart(element, name, strings, parent, options): EventPart

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

только для чтения element: HTMLElementИсточник

только для чтения name: stringИсточник

только для чтения options: undefined | RenderOptionsИсточник

только для чтения strings?: ReadonlyArray<string>Источник

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

только для чтения 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Источник

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

Импорт

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

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

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

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

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

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

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

Импорт

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

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

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

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

Импорт

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

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

new Directive(part): DirectiveИсточник

Параметры
part
PartInfo

тип 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

Подробности

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

  • TemplateResults фиксируются как 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/v2/api/custom-directives/

Spec-Zone.ru

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