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

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

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

Импорт

import { AttributeCommitter } from 'lit-html';

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

новый AttributeCommitter(element, name, strings): AttributeCommitterИсходный код

Параметры

element: Element
name: string
strings: ReadonlyArray<string>

только для чтения element: ElementИсходный код

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

только для чтения parts: ReadonlyArray<AttributePart>Исходный код

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

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

Часть, управляющая всем значением атрибута или его частью.

Импорт

import { AttributePart } from 'lit-html';

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

новый AttributePart(committer): AttributePartИсходный код

Параметры

committer: AttributeCommitter

только для чтения committer: AttributeCommitterИсходный код

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

Применяет текущее значение части, фактически записывая его в DOM.

Подробности

Директивы выполняются в начале commit, поэтому, если они синхронно вызывают part.setValue(...), это значение будет использовано при текущем применении, и вызывать part.commit() внутри директивы не нужно. Если директивы задают значение части асинхронно, они должны вручную вызывать part.commit().

setValue(value): voidИсходный код

Задаёт текущее значение части, но не записывает его в DOM.

Параметры

value: unknown

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

Реализует логический атрибут примерно так, как он определён в спецификации HTML.

Импорт

import { BooleanAttributePart } from 'lit-html';

Подробности

Если значение истинно, атрибут присутствует со значением ''. Если значение ложно, атрибут удаляется.

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

новый BooleanAttributePart(element, name, strings): BooleanAttributePartИсходный код

Параметры

element: Element
name: string
strings: ReadonlyArray<string>

только для чтения element: ElementИсходный код

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

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

value: unknownИсходный код

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

Применяет текущее значение части, фактически записывая его в DOM.

Подробности

setValue(value): voidИсходный код

Задаёт текущее значение части, но не записывает его в DOM.

Параметры

value: unknown

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

Импорт

import { createMarker } from 'lit-html';

Сигнатура

createMarker(): Comment

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

Импорт

import { defaultTemplateProcessor } from 'lit-html';

Тип

DefaultTemplateProcessor

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

Создаёт части при создании экземпляра шаблона.

Импорт

import { DefaultTemplateProcessor } from 'lit-html';

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

новый DefaultTemplateProcessor(): DefaultTemplateProcessor

handleAttributeExpressions(element, name, strings, options): ReadonlyArray<Part>Исходный код

Создаёт части для привязки в позиции атрибута с учётом события, имени атрибута и строковых литералов.

Параметры

element: Element
Элемент, содержащий привязку
name: string
Имя атрибута
strings: Array<string>
Строковые литералы. Всегда присутствуют как минимум две строки, даже для полностью управляемых привязок с одним выражением.
options: RenderOptions

handleTextExpression(options): NodePartИсходный код

Создаёт части для привязки в текстовой позиции.

Параметры

options: RenderOptions

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

Помечает функцию как фабричную функцию директивы, чтобы lit-html вызывал её при рендеринге шаблона, а не передавал в качестве значения.

Импорт

import { directive } from 'lit-html';

Сигнатура

directive(f): F

Параметры

f: F
Фабричная функция директивы. Должна быть функцией, возвращающей функцию с сигнатурой (part: Part) => void. Возвращённая функция будет вызвана с объектом части.

Подробности

Директива — это функция, принимающая Part в качестве аргумента. Её сигнатура: (part: Part) => void.

Фабрика директивы — это функция, которая принимает аргументы с данными и конфигурацией и возвращает директиву. Пользователи директив обычно называют фабрику директивы самой директивой. Например: «директива repeat».

Обычно автор шаблона вызывает фабрику директивы в шаблоне с соответствующими аргументами, после чего она возвращает функцию директивы.

Вот пример использования фабрики директивы repeat(), принимающей массив и функцию для рендеринга элемента:

html`<ul><${repeat(items, (item) => html`<li>${item}</li>`)}</ul>`

При вызове repeat возвращается функция директивы, замыкающая items и функцию шаблона. При рендеринге внешнего шаблона возвращённая функция директивы вызывается с Part для выражения. Затем repeat выполняет собственную логику для рендеринга нескольких элементов.

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

Импорт

import { EventPart } from 'lit-html';

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

новый EventPart(element, eventName, eventContext?): EventPartИсходный код

Параметры

element: Element
eventName: string
eventContext?: EventTarget

только для чтения element: ElementИсходный код

только для чтения eventContext?: EventTargetИсходный код

только для чтения eventName: stringИсходный код

value: undefined | EventHandlerWithOptionsИсходный код

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

Применяет текущее значение части, фактически записывая его в DOM.

Подробности

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

Параметры

event: Event

setValue(value): voidИсходный код

Задаёт текущее значение части, но не записывает его в DOM.

Параметры

value: undefined | EventHandlerWithOptions

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

Импорт

import { isDirective } from 'lit-html';

Сигнатура

isDirective(o): o

Параметры

o: unknown

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

Импорт

import { isIterable } from 'lit-html';

Сигнатура

isIterable(value): value

Параметры

value: unknown

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

Импорт

import { isPrimitive } from 'lit-html';

Сигнатура

isPrimitive(value): value

Параметры

value: unknown

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

Импорт

import { isTemplatePartActive } from 'lit-html';

Сигнатура

isTemplatePartActive(part): boolean

Параметры

part: TemplatePart

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

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

Импорт

import { noChange } from 'lit-html';

Тип

symbol

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

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

Импорт

import { NodePart } from 'lit-html';

Подробности

NodeParts поддерживают несколько типов значений: примитивы, узлы, TemplateResults, а также массивы и итерируемые объекты с такими значениями.

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

new NodePart(options): NodePartИсточник

Параметры

options: RenderOptions

endNode: NodeИсточник

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

startNode: NodeИсточник

value: unknownИсточник

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

Добавляет эту часть в контейнер.

Параметры

container: Node

Подробности

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

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

Добавляет эту часть в родительскую часть.

Параметры

part: NodePart

Подробности

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

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

Параметры

startNode: Node

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

Фиксирует текущее значение части, записывая его в DOM.

Подробности

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

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

Вставляет эту часть после узла ref (между ref и следующим соседом ref). И ref, и его следующий сосед должны быть статическими, неизменяемыми узлами, например узлами, находящимися в буквальном фрагменте шаблона.

Параметры

ref: Node

Подробности

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

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

Вставляет эту часть после части ref.

Параметры

ref: NodePart

Подробности

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

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

Задаёт текущее значение части, но не записывает его в DOM.

Параметры

value: unknown

значение partsИсточник

Импорт

import { parts } from 'lit-html';

Тип

WeakMap<Node, NodePart>

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

Устанавливает значения атрибутов для PropertyParts, чтобы значение задавалось только один раз, даже если для свойства имеется несколько частей.

Импорт

import { PropertyCommitter } from 'lit-html';

Подробности

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

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

new PropertyCommitter(element, name, strings): PropertyCommitterИсточник

Параметры

element: Element
name: string
strings: ReadonlyArray<string>

dirty: booleanИсточник

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

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

readonly parts: ReadonlyArray<AttributePart>Источник

readonly single: booleanИсточник

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

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

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

Импорт

import { PropertyPart } from 'lit-html';

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

new PropertyPart(committer): PropertyPart

Параметры

committer: AttributeCommitter

readonly committer: AttributeCommitterИсточник

value: unknownИсточник

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

Фиксирует текущее значение части, записывая его в DOM.

Подробности

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

Задаёт текущее значение части, но не записывает его в DOM.

Параметры

value: unknown

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

Удаляет узлы из container, начиная с start (включительно) и заканчивая end (не включая).

Импорт

import { removeNodes } from 'lit-html';

Сигнатура

removeNodes(container, start, end): void

Параметры

container: Node
start: null | Node
end: null | Node

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

Перемещает узлы в другой контейнер (возможно, тот же самый), начиная с start (включительно) и заканчивая end (не включая), перед before. Если before равен null, узлы добавляются в контейнер.

Импорт

import { reparentNodes } from 'lit-html';

Сигнатура

reparentNodes(container, start, end, before): void

Параметры

container: Node
start: null | Node
end: null | Node
before: null | Node

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

Обновляемый шаблон, отслеживающий расположение динамических частей.

Импорт

import { Template } from 'lit-html';

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

new Template(result, element): TemplateИсточник

Параметры

result: TemplateResult
element: HTMLTemplateElement

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

readonly parts: Array<TemplatePart>Источник

значение templateCachesИсточник

Импорт

import { templateCaches } from 'lit-html';

Тип

Map<string, TemplateCache>

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

Фабрика шаблонов по умолчанию, кэширующая шаблоны по ключам result.type и result.strings.

Импорт

import { templateFactory } from 'lit-html';

Сигнатура

templateFactory(result): Template

Параметры

result: TemplateResult

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

Экземпляр Template, который можно прикрепить к DOM и обновлять новыми значениями.

Импорт

import { TemplateInstance } from 'lit-html';

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

new TemplateInstance(template, processor, options): TemplateInstanceИсточник

Параметры

template: Template
processor: TemplateProcessor
options: RenderOptions

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

readonly processor: TemplateProcessorИсточник

readonly template: TemplateИсточник

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

Параметры

values: ReadonlyArray<unknown>

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

Импорт

import { DirectiveFn } from 'lit-html';

Тип

(part: Part) => void

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

Интерфейс Part представляет динамическую часть экземпляра шаблона, отрисованного lit-html.

Импорт

import { Part } from 'lit-html';

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

readonly value: unknownИсточник

commit(): void

Фиксирует текущее значение части, записывая его в DOM.

Подробности

setValue(value): void

Задаёт текущее значение части, но не записывает его в DOM.

Параметры

value: unknown
Значение, которое будет зафиксировано.

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

Импорт

import { TemplateProcessor } from 'lit-html';

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

handleAttributeExpressions(element, name, strings, options): ReadonlyArray<Part>

Создаёт части для привязки в позиции атрибута на основе элемента, имени атрибута и строковых литералов.

Параметры

element: Element
Элемент, содержащий привязку
name: string
Имя атрибута, возможно с префиксом. Перед именем может стоять префикс . (для привязки свойства), @ (для привязки события) или ? (для привязки логического атрибута).
strings: ReadonlyArray<string>
Массив строковых литералов, образующих статическую часть значения атрибута. Всегда имеется не менее двух строк, даже для полностью управляемых привязок с одним выражением. Например, для привязки attr="${e1}-${e2}" массив strings содержит три строки (['', '-', '']): текст перед первым выражением (пустая строка), текст между двумя выражениями ('-') и текст после последнего выражения (ещё одна пустая строка).
options: RenderOptions

handleTextExpression(options): NodePart

Создаёт части для привязки в текстовой позиции.

Параметры

options: RenderOptions

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

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

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

Импорт

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

новый AttributeCommitter(element, name, strings): AttributeCommitterИсходный код

Параметры

dirty: booleanИсходный код

только для чтения element: ElementИсходный код

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

только для чтения parts: ReadonlyArray<AttributePart>Исходный код

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

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

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

Импорт

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

новый AttributePart(committer): AttributePartИсходный код

Параметры

только для чтения committer: AttributeCommitterИсходный код

value: unknownИсходный код

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

Подробности

setValue(value): voidИсходный код

Параметры

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

Импорт

Подробности

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

новый BooleanAttributePart(element, name, strings): BooleanAttributePartИсходный код

Параметры

только для чтения element: ElementИсходный код

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

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

value: unknownИсходный код

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

Подробности

setValue(value): voidИсходный код

Параметры

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

Импорт

Сигнатура

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

Импорт

Тип

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

Импорт

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

новый DefaultTemplateProcessor(): DefaultTemplateProcessor

handleAttributeExpressions(element, name, strings, options): ReadonlyArray<Part>Исходный код

Параметры

handleTextExpression(options): NodePartИсходный код

Параметры

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

Импорт

Сигнатура

Параметры

Подробности

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

Импорт

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

новый EventPart(element, eventName, eventContext?): EventPartИсходный код

Параметры

только для чтения element: ElementИсходный код

только для чтения eventContext?: EventTargetИсходный код

только для чтения eventName: stringИсходный код

value: undefined | EventHandlerWithOptionsИсходный код

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

Подробности

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

Параметры

setValue(value): voidИсходный код

Параметры

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

Импорт

Сигнатура

Параметры

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

Импорт

Сигнатура

Параметры

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