自訂指令

一個抽象的 Directive 基底類別，當包含指令的部分因重新渲染而被清除，或是當使用者在先前渲染包含指令的部分上呼叫 part.setConnected(false) 時，會呼叫其 disconnected 方法（例如，當 LitElement 從 DOM 斷開連線時）。

導入

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

詳細資訊

如果後續在包含的部分上呼叫 part.setConnected(true)，則會在指令的下一個 update/render 回呼之前呼叫指令的 reconnected 方法。實作 disconnected 時，也應實作 reconnected 以與重新連線相容。請注意，更新可能會在指令斷開連線時發生。因此，指令通常應在 render/update 期間檢查 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 的部件

refPart?

ChildPart

要在其之前新增新 ChildPart 的部件；省略時，會將部件新增至 containerPart 的結尾

part?

ChildPart

要插入的部件，或 undefined 以建立新部件

詳細資訊

這不會將部件新增至 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

測試部件是否只有單一運算式，且沒有要在中間插入的字串。

導入

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

簽名

isSingleExpression(part): boolean

參數

part

PartInfo

詳細資訊

只有 AttributePart 和 PropertyPart 可以有多個運算式。多運算式部件具有 strings 屬性，而單運算式部件則沒有。

測試值是否為 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

要移除的部件

設定部件的值。

導入

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

簽名

setChildPartValue(part, value, directiveParent?): T

參數

part

T

要設定的部件

value

unknown

要設定的值

directiveParent?

DirectiveParent

內部使用；不應由使用者設定

詳細資訊

請注意，這只應用於設定/更新使用者建立的部件的值（即使用 insertPart 建立的部件）；它不應由指令用來設定指令的容器部件的值。指令應從 update/render 傳回一個值，以更新其部件狀態。對於需要非同步設定其部件值的指令，它們應擴充 AsyncDirective 並呼叫 this.setValue()。

直接設定 ChildPart 的已提交值，而不會觸發部件的提交階段。

導入

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

簽名

setCommittedValue(part, value?): unknown

參數

part

Part

value?

unknown

詳細資訊

這在指令需要更新部分，以便下次更新時偵測到數值是否變更的情況下很有用。當省略值時，會保證下次更新將被偵測為變更。

導入

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

類型

一個哨兵值，表示數值已由指令處理，不應寫入 DOM。

導入

import { noChange } from 'lit';

類型