你正在查看 Lit 的旧版本文档。点击 这里查看最新版本。

Custom directives

Writes attribute values to the DOM for a group of AttributeParts bound to a single attribute. The value is only set once even if there are multiple parts for an attribute.

导入

import { AttributeCommitter } from 'lit-html';

方法和属性

new AttributeCommitter(element, name, strings): AttributeCommitter

永久链接到 constructor 查看源码
参数
element
MDN Element
name
string
strings
ReadonlyArray<string>

readonly strings: ReadonlyArray<string>

永久链接到 strings 查看源码

A Part that controls all or part of an attribute value.

导入

import { AttributePart } from 'lit-html';

方法和属性

参数
committer
AttributeCommitter

Commits the current part value, causing it to actually be written to the DOM.

详情

Directives are run at the start of commit, so that if they call part.setValue(...) synchronously that value will be used in the current commit, and there's no need to call part.commit() within the directive. If directives set a part value asynchronously, then they must call part.commit() manually.

Sets the current part value, but does not write it to the DOM.

参数
value
unknown

Implements a boolean attribute, roughly as defined in the HTML specification.

导入

import { BooleanAttributePart } from 'lit-html';

详情

If the value is truthy, then the attribute is present with a value of ''. If the value is falsey, the attribute is removed.

方法和属性

new BooleanAttributePart(element, name, strings): BooleanAttributePart

永久链接到 constructor 查看源码
参数
element
MDN Element
name
string
strings
ReadonlyArray<string>

readonly strings: ReadonlyArray<string>

永久链接到 strings 查看源码

Commits the current part value, causing it to actually be written to the DOM.

详情

Directives are run at the start of commit, so that if they call part.setValue(...) synchronously that value will be used in the current commit, and there's no need to call part.commit() within the directive. If directives set a part value asynchronously, then they must call part.commit() manually.

Sets the current part value, but does not write it to the DOM.

参数
value
unknown

导入

import { createMarker } from 'lit-html';

签名

createMarker(): Comment

导入

import { defaultTemplateProcessor } from 'lit-html';

类型

DefaultTemplateProcessor

Creates Parts when a template is instantiated.

导入

import { DefaultTemplateProcessor } from 'lit-html';

方法和属性

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

永久链接到 handleAttributeExpressions 查看源码

Create parts for an attribute-position binding, given the event, attribute name, and string literals.

参数
element
MDN Element

The element containing the binding

name
string

The attribute name

strings
Array<string>

The string literals. There are always at least two strings, event for fully-controlled bindings with a single expression.

options
RenderOptions

Create parts for a text-position binding.

参数
options
RenderOptions

Brands a function as a directive factory function so that lit-html will call the function during template rendering, rather than passing as a value.

导入

import { directive } from 'lit-html';

签名

directive(f): F

参数

f
F

The directive factory function. Must be a function that returns a function of the signature (part: Part) => void. The returned function will be called with the part object.

详情

A directive is a function that takes a Part as an argument. It has the signature: (part: Part) => void.

A directive factory is a function that takes arguments for data and configuration and returns a directive. Users of directive usually refer to the directive factory as the directive. For example, "The repeat directive".

Usually a template author will invoke a directive factory in their template with relevant arguments, which will then return a directive function.

Here's an example of using the repeat() directive factory that takes an array and a function to render an item:

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

When repeat is invoked, it returns a directive function that closes over items and the template function. When the outer template is rendered, the return directive function is called with the Part for the expression. repeat then performs it's custom logic to render multiple items.

导入

import { EventPart } from 'lit-html';

方法和属性

new EventPart(element, eventName, eventContext?): EventPart

永久链接到 constructor 查看源码
参数
element
MDN Element
eventName
string
eventContext?
EventTarget

readonly eventContext?: EventTarget

永久链接到 eventContext 查看源码

value: undefined | EventHandlerWithOptions

永久链接到 value 查看源码

Commits the current part value, causing it to actually be written to the DOM.

详情

Directives are run at the start of commit, so that if they call part.setValue(...) synchronously that value will be used in the current commit, and there's no need to call part.commit() within the directive. If directives set a part value asynchronously, then they must call part.commit() manually.

参数
event
Event

Sets the current part value, but does not write it to the DOM.

参数
value
undefined | EventHandlerWithOptions

导入

import { isDirective } from 'lit-html';

签名

isDirective(o): o

参数

o
unknown

导入

import { isIterable } from 'lit-html';

签名

isIterable(value): value

参数

value
unknown

导入

import { isPrimitive } from 'lit-html';

签名

isPrimitive(value): value

参数

value
unknown

导入

import { isTemplatePartActive } from 'lit-html';

签名

isTemplatePartActive(part): boolean

参数

part
TemplatePart

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-html';

类型

symbol

A Part that controls a location within a Node tree. Like a Range, NodePart has start and end locations and can set and update the Nodes between those locations.

导入

import { NodePart } from 'lit-html';

详情

NodeParts support several value types: primitives, Nodes, TemplateResults, as well as arrays and iterables of those types.

方法和属性

参数
options
RenderOptions

Appends this part into a container.

参数
container
Node
详情

This part must be empty, as its contents are not automatically moved.

Appends this part into a parent part.

参数
part
NodePart
详情

This part must be empty, as its contents are not automatically moved.

参数
startNode
Node

Commits the current part value, causing it to actually be written to the DOM.

详情

Directives are run at the start of commit, so that if they call part.setValue(...) synchronously that value will be used in the current commit, and there's no need to call part.commit() within the directive. If directives set a part value asynchronously, then they must call part.commit() manually.

Inserts this part after the ref node (between ref and ref's next sibling). Both ref and its next sibling must be static, unchanging nodes such as those that appear in a literal section of a template.

参数
ref
Node
详情

This part must be empty, as its contents are not automatically moved.

Inserts this part after the ref part.

参数
ref
NodePart
详情

This part must be empty, as its contents are not automatically moved.

Sets the current part value, but does not write it to the DOM.

参数
value
unknown

导入

import { parts } from 'lit-html';

类型

WeakMap<Node, NodePart>

Sets attribute values for PropertyParts, so that the value is only set once even if there are multiple parts for a property.

导入

import { PropertyCommitter } from 'lit-html';

详情

If an expression controls the whole property value, then the value is simply assigned to the property under control. If there are string literals or multiple expressions, then the strings are expressions are interpolated into a string first.

方法和属性

new PropertyCommitter(element, name, strings): PropertyCommitter

永久链接到 constructor 查看源码
参数
element
MDN Element
name
string
strings
ReadonlyArray<string>

readonly strings: ReadonlyArray<string>

永久链接到 strings 查看源码

导入

import { PropertyPart } from 'lit-html';

方法和属性

new PropertyPart(committer): PropertyPart

永久链接到 constructor
参数
committer
AttributeCommitter

Commits the current part value, causing it to actually be written to the DOM.

详情

Directives are run at the start of commit, so that if they call part.setValue(...) synchronously that value will be used in the current commit, and there's no need to call part.commit() within the directive. If directives set a part value asynchronously, then they must call part.commit() manually.

Sets the current part value, but does not write it to the DOM.

参数
value
unknown

Removes nodes, starting from start (inclusive) to end (exclusive), from container.

导入

import { removeNodes } from 'lit-html';

签名

removeNodes(container, start, end): void

参数

container
Node
start
null | Node
end
null | Node

Reparents nodes, starting from start (inclusive) to end (exclusive), into another container (could be the same container), before before. If before is null, it appends the nodes to the container.

导入

import { reparentNodes } from 'lit-html';

签名

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

参数

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

An updatable Template that tracks the location of dynamic parts.

导入

import { Template } from 'lit-html';

导入

import { templateCaches } from 'lit-html';

类型

Map<string, TemplateCache>

The default TemplateFactory which caches Templates keyed on result.type and result.strings.

导入

import { templateFactory } from 'lit-html';

签名

templateFactory(result): Template

参数

result
TemplateResult

An instance of a Template that can be attached to the DOM and updated with new values.

导入

import { TemplateInstance } from 'lit-html';

方法和属性

new TemplateInstance(template, processor, options): TemplateInstance

永久链接到 constructor 查看源码
参数
template
Template
processor
TemplateProcessor
options
RenderOptions
参数
values
ReadonlyArray<unknown>

导入

import { DirectiveFn } from 'lit-html';

类型

(part: Part) => void

The Part interface represents a dynamic part of a template instance rendered by lit-html.

导入

import { Part } from 'lit-html';

方法和属性

Commits the current part value, causing it to actually be written to the DOM.

详情

Directives are run at the start of commit, so that if they call part.setValue(...) synchronously that value will be used in the current commit, and there's no need to call part.commit() within the directive. If directives set a part value asynchronously, then they must call part.commit() manually.

setValue(value): void

永久链接到 setValue

Sets the current part value, but does not write it to the DOM.

参数
value
unknown

The value that will be committed.

导入

import { TemplateProcessor } from 'lit-html';

方法和属性

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

永久链接到 handleAttributeExpressions

Create parts for an attribute-position binding, given the element, attribute name, and string literals.

参数
element
MDN Element

The element containing the binding

name
string

The attribute name, including a possible prefix. The name may be prefixed by . (for a property binding), @ (for an event binding) or ? (for a boolean attribute binding).

strings
ReadonlyArray<string>

The array of literal strings that form the static part of the attribute value. There are always at least two strings, even for fully-controlled bindings with a single expression. For example, for the binding attr="${e1}-${e2}", the strings array includes three strings (['', '-', ''])—the text before the first expression (the empty string), the text between the two expressions ('-'), and the text after the last expression (another empty string).

options
RenderOptions

handleTextExpression(options): NodePart

永久链接到 handleTextExpression

Create parts for a text-position binding.

参数
options
RenderOptions