自定义指令

一个抽象的 Directive 基类，其 disconnected 方法将在包含该指令的部件因重新渲染而被清除时调用，或者当用户在之前渲染过包含该指令的部件上调用 part.setConnected(false) 时调用（例如，当 LitElement 与 DOM 断开连接时发生）。

导入

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

详情

如果 part.setConnected(true) 随后在包含的部件上被调用，则指令的 reconnected 方法将在其下一个 update/render 回调之前被调用。在实现 disconnected 时，也应实现 reconnected 以与重新连接兼容。请注意，更新可能在指令断开连接时发生。因此，指令通常应该在渲染/更新期间检查 this.isConnected 标志，以确定是否可以安全地订阅可能阻止垃圾回收的资源。

导入

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

导入

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

导入

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

从 Directive 类创建面向用户的指令函数。此函数与指令的 render() 方法具有相同的参数。

导入

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

签名

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

参数

c

C

用于创建自定义指令的基类。用户应扩展此类，实现 render 和/或 update，然后将子类传递给 directive。

导入

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

导入

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

导入

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

导入

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

类型

导入

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

导入

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

导入

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

导入

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

此实用程序类型提取了指令类 render() 方法的签名，因此我们可以将其用于生成指令函数的类型。

导入

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

类型

生成的指令函数不会评估指令，而只是返回一个 DirectiveResult 对象，该对象捕获了参数。

导入

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

导入

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

导入

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

类型

有关指令绑定到的部分的信息。

导入

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

类型

详情

这对于检查指令是否附加到有效的部分很有用，例如只能在属性绑定上使用的指令。

导入

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

签名

clearPart(part): void

参数

part

ChildPart

返回 ChildPart 的已提交值。

导入

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

签名

getCommittedValue(part): unknown

参数

part

ChildPart

详情

已提交的值用于变更检测和对部分的有效更新。在模板值在提交之前被转换的情况下，它可能与模板设置或指令设置的值不同。

• TemplateResult 会被提交为 TemplateInstance
• 可迭代项会被提交为 Array<ChildPart>
• 所有其他类型都将提交为模板值或指令返回或设置的值。

检索 DirectiveResult 的 Directive 类。

导入

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

签名

getDirectiveClass(value): undefined | DirectiveClass

参数

value

unknown

将 ChildPart 插入到给定容器 ChildPart 的 DOM 中，可以是容器 ChildPart 的末尾，也可以是在可选 refPart 之前。

导入

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

签名

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

参数

containerPart

ChildPart

要添加新 ChildPart 的 Part

refPart?

ChildPart

要添加新 ChildPart 的 Part 之前；省略时，该 Part 将添加到 containerPart 的末尾

part?

ChildPart

要插入的 Part，或未定义以创建新 Part

详情

这不会将该 Part 添加到 containerPart 的已提交值中。这必须由调用者完成。

测试一个值是否是 DirectiveResult。

导入

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

签名

isDirectiveResult(value): value

参数

value

unknown

测试一个值是否是原始值。

导入

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

签名

isPrimitive(value): value

参数

value

unknown

详情

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

测试一个 Part 是否只有一个表达式，没有任何字符串在其中进行插值。

导入

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

签名

isSingleExpression(part): boolean

参数

part

PartInfo

详情

只有 AttributePart 和 PropertyPart 可以有多个表达式。多表达式 Part 有一个 strings 属性，而单表达式 Part 则没有。

测试一个值是否是 TemplateResult。

导入

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

签名

isTemplateResult(value, type?): value

参数

value

unknown

type?

TemplateResultType

从 DOM 中移除 ChildPart，包括其所有内容。

导入

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

签名

removePart(part): void

参数

part

ChildPart

要移除的 Part

设置 Part 的值。

导入

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

签名

setChildPartValue(part, value, directiveParent?): T

参数

part

T

要设置的 Part

value

unknown

要设置的值

directiveParent?

DirectiveParent

在内部使用；不应由用户设置

详情

请注意，这应该只用于设置/更新用户创建的 Part（即使用 insertPart 创建的 Part）；它不应由指令用于设置指令的容器 Part 的值。指令应该从 update/render 中返回一个值以更新其 Part 状态。对于需要异步设置其 Part 值的指令，它们应该扩展 AsyncDirective 并调用 this.setValue()。

直接设置 ChildPart 的已提交值，而不触发该 Part 的提交阶段。

导入

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

签名

setCommittedValue(part, value?): unknown

参数

part

Part

value?

unknown

详情

这在指令需要更新 Part 以便下一次更新检测到值变更或不检测到值变更的情况下很有用。当省略 value 时，下一次更新将保证被检测为变更。

导入

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

类型

一个哨兵值，它表示一个值已由指令处理，不应写入 DOM。

导入

import { noChange } from 'lit';

类型