Custom directives

AsyncDirective

class 永久链接到 AsyncDirective 查看源码

An abstract Directive base class whose disconnected method will be called when the part containing the directive is cleared as a result of re-rendering, or when the user calls part.setConnected(false) on a part that was previously rendered containing the directive (as happens when e.g. a LitElement disconnects from the DOM).

导入

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

详情

If part.setConnected(true) is subsequently called on a containing part, the directive's reconnected method will be called prior to its next update/render callbacks. When implementing disconnected, reconnected should also be implemented to be compatible with reconnection. Note that updates may occur while the directive is disconnected. As such, directives should generally check the this.isConnected flag during render/update to determine whether it is safe to subscribe to resources that may prevent garbage collection.

方法和属性

new AsyncDirective(_partInfo): AsyncDirective

永久链接到 constructor
参数
_partInfo
PartInfo

isConnected: boolean

永久链接到 isConnected 查看源码

The connection state for this Directive.

disconnected(): void

永久链接到 disconnected 查看源码

User callbacks for implementing logic to release any resources/subscriptions that may have been retained by this directive. Since directives may also be re-connected, reconnected should also be implemented to restore the working state of the directive prior to the next render.

reconnected(): void

永久链接到 reconnected 查看源码

render(props): unknown

永久链接到 render 查看源码
参数
props
Array<unknown>

setValue(value): void

永久链接到 setValue 查看源码

Sets the value of the directive's Part outside the normal update/render lifecycle of a directive.

参数
value
unknown

The value to set

详情

This method should not be called synchronously from a directive's update or render.

update(_part, props): unknown

永久链接到 update 查看源码
参数
_part
Part
props
Array<unknown>

AttributePart

class 永久链接到 AttributePart 查看源码

导入

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

方法和属性

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

永久链接到 constructor
参数
element
MDN HTMLElement
name
string
strings
ReadonlyArray<string>
parent
Disconnectable
options
undefined | RenderOptions

readonly element: MDN HTMLElement

永久链接到 element 查看源码

readonly name: string

永久链接到 name 查看源码

readonly options: undefined | RenderOptions

永久链接到 options 查看源码

readonly strings?: ReadonlyArray<string>

永久链接到 strings 查看源码

If this attribute part represents an interpolation, this contains the static strings of the interpolation. For single-value, complete bindings, this is undefined.

readonly type: 1 | 3 | 4 | 5

永久链接到 type 查看源码

tagName: string

永久链接到 tagName 查看源码

BooleanAttributePart

class 永久链接到 BooleanAttributePart 查看源码

导入

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

方法和属性

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

永久链接到 constructor
参数
element
MDN HTMLElement
name
string
strings
ReadonlyArray<string>
parent
Disconnectable
options
undefined | RenderOptions

readonly element: MDN HTMLElement

永久链接到 element 查看源码

readonly name: string

永久链接到 name 查看源码

readonly options: undefined | RenderOptions

永久链接到 options 查看源码

readonly strings?: ReadonlyArray<string>

永久链接到 strings 查看源码

If this attribute part represents an interpolation, this contains the static strings of the interpolation. For single-value, complete bindings, this is undefined.

readonly type: 4

永久链接到 type 查看源码

tagName: string

永久链接到 tagName 查看源码

ChildPart

class 永久链接到 ChildPart 查看源码

导入

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

方法和属性

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

永久链接到 constructor
参数
startNode
ChildNode
endNode
null | ChildNode
parent
undefined | ChildPart | TemplateInstance
options
undefined | RenderOptions

readonly options: undefined | RenderOptions

永久链接到 options 查看源码

readonly type: 2

永久链接到 type 查看源码

endNode: null | Node

永久链接到 endNode 查看源码

The part's trailing marker node, if any. See .parentNode for more information.

parentNode: Node

永久链接到 parentNode 查看源码

The parent node into which the part renders its content.

详情

A ChildPart's content consists of a range of adjacent child nodes of .parentNode, possibly bordered by 'marker nodes' (.startNode and .endNode).

  • If both .startNode and .endNode are non-null, then the part's content consists of all siblings between .startNode and .endNode, exclusively.
  • If .startNode is non-null but .endNode is null, then the part's content consists of all siblings following .startNode, up to and including the last child of .parentNode. If .endNode is non-null, then .startNode will always be non-null.
  • If both .endNode and .startNode are null, then the part's content consists of all child nodes of .parentNode.

startNode: null | Node

永久链接到 startNode 查看源码

The part's leading marker node, if any. See .parentNode for more information.

directive

function 永久链接到 directive 查看源码

Creates a user-facing directive function from a Directive class. This function has the same parameters as the directive's render() method.

导入

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

签名

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

参数

c
C

Directive

class 永久链接到 Directive 查看源码

Base class for creating custom directives. Users should extend this class, implement render and/or update, and then pass their subclass to directive.

导入

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

方法和属性

new Directive(_partInfo): Directive

永久链接到 constructor
参数
_partInfo
PartInfo

render(props): unknown

永久链接到 render 查看源码
参数
props
Array<unknown>

update(_part, props): unknown

永久链接到 update 查看源码
参数
_part
Part
props
Array<unknown>

ElementPart

class 永久链接到 ElementPart 查看源码

导入

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

方法和属性

new ElementPart(element, parent, options): ElementPart

永久链接到 constructor
参数
element
MDN Element
parent
Disconnectable
options
undefined | RenderOptions

element: MDN Element

永久链接到 element 查看源码

options: undefined | RenderOptions

永久链接到 options 查看源码

readonly type: 6

永久链接到 type 查看源码

EventPart

class 永久链接到 EventPart 查看源码

导入

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

方法和属性

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

永久链接到 constructor
参数
element
MDN HTMLElement
name
string
strings
ReadonlyArray<string>
parent
Disconnectable
options
undefined | RenderOptions

readonly element: MDN HTMLElement

永久链接到 element 查看源码

readonly name: string

永久链接到 name 查看源码

readonly options: undefined | RenderOptions

永久链接到 options 查看源码

readonly strings?: ReadonlyArray<string>

永久链接到 strings 查看源码

If this attribute part represents an interpolation, this contains the static strings of the interpolation. For single-value, complete bindings, this is undefined.

readonly type: 5

永久链接到 type 查看源码

tagName: string

永久链接到 tagName 查看源码

handleEvent(event): void

永久链接到 handleEvent 查看源码
参数
event
Event

PartType

value 永久链接到 PartType 查看源码

导入

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

类型

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

PropertyPart

class 永久链接到 PropertyPart 查看源码

导入

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

方法和属性

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

永久链接到 constructor
参数
element
MDN HTMLElement
name
string
strings
ReadonlyArray<string>
parent
Disconnectable
options
undefined | RenderOptions

readonly element: MDN HTMLElement

永久链接到 element 查看源码

readonly name: string

永久链接到 name 查看源码

readonly options: undefined | RenderOptions

永久链接到 options 查看源码

readonly strings?: ReadonlyArray<string>

永久链接到 strings 查看源码

If this attribute part represents an interpolation, this contains the static strings of the interpolation. For single-value, complete bindings, this is undefined.

readonly type: 3

永久链接到 type 查看源码

tagName: string

永久链接到 tagName 查看源码

AttributePartInfo

type 永久链接到 AttributePartInfo 查看源码

导入

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

方法和属性

readonly name: string

永久链接到 name 查看源码

readonly strings?: ReadonlyArray<string>

永久链接到 strings 查看源码

readonly tagName: string

永久链接到 tagName 查看源码

readonly type: 1 | 3 | 4 | 5

永久链接到 type 查看源码

ChildPartInfo

type 永久链接到 ChildPartInfo 查看源码

导入

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

方法和属性

readonly type: 2

永久链接到 type 查看源码

DirectiveClass

type 永久链接到 DirectiveClass 查看源码

导入

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

方法和属性

new Directive(part): Directive

永久链接到 constructor 查看源码
参数
part
PartInfo

DirectiveParameters

type 永久链接到 DirectiveParameters 查看源码

This utility type extracts the signature of a directive class's render() method so we can use it for the type of the generated directive function.

导入

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

类型

Parameters<C["render"]>

DirectiveResult

type 永久链接到 DirectiveResult 查看源码

A generated directive function doesn't evaluate the directive, but just returns a DirectiveResult object that captures the arguments.

导入

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

ElementPartInfo

type 永久链接到 ElementPartInfo 查看源码

导入

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

方法和属性

readonly type: 6

永久链接到 type 查看源码

Part

type 永久链接到 Part 查看源码

导入

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

类型

ChildPart | AttributePart | PropertyPart | BooleanAttributePart | ElementPart | EventPart

PartInfo

type 永久链接到 PartInfo 查看源码

Information about the part a directive is bound to.

导入

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

类型

ChildPartInfo | AttributePartInfo | ElementPartInfo

详情

This is useful for checking that a directive is attached to a valid part, such as with directive that can only be used on attribute bindings.

clearPart

function 永久链接到 clearPart 查看源码

导入

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

签名

clearPart(part): void

参数

part
ChildPart

getCommittedValue

function 永久链接到 getCommittedValue 查看源码

Returns the committed value of a ChildPart.

导入

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

签名

getCommittedValue(part): unknown

参数

part
ChildPart

详情

The committed value is used for change detection and efficient updates of the part. It can differ from the value set by the template or directive in cases where the template value is transformed before being committed.

  • TemplateResults are committed as a TemplateInstance
  • Iterables are committed as Array<ChildPart>
  • All other types are committed as the template value or value returned or set by a directive.

getDirectiveClass

function 永久链接到 getDirectiveClass 查看源码

Retrieves the Directive class for a DirectiveResult

导入

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

签名

getDirectiveClass(value): undefined | DirectiveClass

参数

value
unknown

insertPart

function 永久链接到 insertPart 查看源码

Inserts a ChildPart into the given container ChildPart's DOM, either at the end of the container ChildPart, or before the optional refPart.

导入

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

签名

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

参数

containerPart
ChildPart

Part within which to add the new ChildPart

refPart?
ChildPart

Part before which to add the new ChildPart; when omitted the part added to the end of the containerPart

part?
ChildPart

Part to insert, or undefined to create a new part

详情

This does not add the part to the containerPart's committed value. That must be done by callers.

isDirectiveResult

function 永久链接到 isDirectiveResult 查看源码

Tests if a value is a DirectiveResult.

导入

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

签名

isDirectiveResult(value): value

参数

value
unknown

isPrimitive

function 永久链接到 isPrimitive 查看源码

Tests if a value is a primitive value.

导入

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

签名

isPrimitive(value): value

参数

value
unknown

详情

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

isSingleExpression

function 永久链接到 isSingleExpression 查看源码

Tests whether a part has only a single-expression with no strings to interpolate between.

导入

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

签名

isSingleExpression(part): boolean

参数

part
PartInfo

详情

Only AttributePart and PropertyPart can have multiple expressions. Multi-expression parts have a strings property and single-expression parts do not.

isTemplateResult

function 永久链接到 isTemplateResult 查看源码

Tests if a value is a TemplateResult.

导入

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

签名

isTemplateResult(value, type?): value

参数

value
unknown
type?
TemplateResultType

removePart

function 永久链接到 removePart 查看源码

Removes a ChildPart from the DOM, including any of its content.

导入

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

签名

removePart(part): void

参数

part
ChildPart

The Part to remove

setChildPartValue

function 永久链接到 setChildPartValue 查看源码

Sets the value of a Part.

导入

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

签名

setChildPartValue(part, value, directiveParent?): T

参数

part
T

Part to set

value
unknown

Value to set

directiveParent?
DirectiveParent

Used internally; should not be set by user

详情

Note that this should only be used to set/update the value of user-created parts (i.e. those created using insertPart); it should not be used by directives to set the value of the directive's container part. Directives should return a value from update/render to update their part state. For directives that require setting their part value asynchronously, they should extend AsyncDirective and call this.setValue().

setCommittedValue

function 永久链接到 setCommittedValue 查看源码

Sets the committed value of a ChildPart directly without triggering the commit stage of the part.

导入

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

签名

setCommittedValue(part, value?): unknown

参数

part
Part
value?
unknown

详情

This is useful in cases where a directive needs to update the part such that the next update detects a value change or not. When value is omitted, the next update will be guaranteed to be detected as a change.

TemplateResultType

value 永久链接到 TemplateResultType 查看源码

导入

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

类型

{HTML: 1, SVG: 2}

noChange

value 永久链接到 noChange 查看源码

A sentinel value that signals that a value was handled by a directive and should not be written to the DOM.

导入

import { noChange } from 'lit';

类型

symbol