企业官网建设流程全解析

• 前端
• UI组件

导读

本文聚焦于 FAST Element（@microsoft/fast-element）模板引擎中的一个核心运行时概念——ExecutionContext.parentContext属性。它用于在repeat、when等指令构造的嵌套上下文场景中，串联起"当前执行上下文"与"其父级执行上下文"的引用链，从而让绑定表达式能够沿上下文逐级向上解析外层数据源。读完本文，你将掌握parentContext的精确语义、与parent数据源属性的区别、FAST Element 在运行时如何为它赋值，以及如何利用它编写跨层级数据访问的绑定表达式。

一、属性定义与 API 签名

在 FAST Element 1.x 的公开 API 中，ExecutionContext是一个提供给绑定表达式和行为（behavior）的上下文对象接口，而parentContext是其上的一个可写属性。

依据 fast-element.executioncontext.parentcontext.md 文档，该属性的官方描述为：

The parent execution context when in nested context scenarios.

其类型签名如下：

parentContext: ExecutionContext<TGrandparent>;

其中TGrandparent是泛型参数，表示父执行上下文所对应的数据源类型（即"祖父级"数据源的类型）。也就是说，parentContext的类型并非固定为any，而是可以由使用方通过泛型精确声明：当你在嵌套上下文中编写绑定表达式时，parentContext指向的父上下文所绑定的数据源类型即为TGrandparent。

完整接口定义位于 observation/observable.ts：

export interface ExecutionContext<TParent = any> { /** * The index of the current item within a repeat context. */ index: number; /** * The length of the current collection within a repeat context. */ length: number; /** * The parent data source within a nested context. */ parent: TParent; /** * The parent execution context when in nested context scenarios. */ parentContext: ExecutionContext<TParent>; /** * The current event within an event handler. */ readonly event: Event; readonly isEven: boolean; readonly isOdd: boolean; readonly isFirst: boolean; readonly isInMiddle: boolean; readonly isLast: boolean; ... }

二、parentContext与parent的区别

这是最容易混淆的一对属性，两者在嵌套场景中同时出现，但语义完全不同：

从源码可见，parent在 repeat.ts 中被赋值为外层控制器的controller.source（即外层数据对象），而parentContext被赋值为外层控制器的controller.context（即外层的完整执行上下文）：

function bindWithoutPositioning( view: SyntheticView, items: readonly any[], index: number, controller: ViewController, ): void { view.context.parent = controller.source; view.context.parentContext = controller.context; view.bind(items[index]); }

实践中的直观区别是：parent直接取外层数据值（如parent.name可读取外层对象的name字段），而parentContext则保留外层上下文的全部运行时状态（如parentContext.index可读取外层repeat的当前索引）。当你只需要外层数据时用parent；当你还需要外层的索引、长度或事件信息时，就必须借助parentContext。

三、运行时赋值机制：parentContext从何而来

parentContext不是一个由用户手工维护的属性，而是由 FAST Element 在指令绑定阶段自动写入的。

3.1 默认实现类中的声明

ExecutionContext接口的实现类是 view.ts 中的DefaultExecutionContext<TParent>，parentContext在其中被声明为只读字段：

export class DefaultExecutionContext<TParent> implements ExecutionContext<TParent> { public index: number = 0; public length: number = 0; public readonly parent: TParent; public readonly parentContext: ExecutionContext<TParent>; ... }

而标准视图HTMLView继承DefaultExecutionContext，同时实现ElementView、SyntheticView与ExecutionContext三个接口，并把context指向自身（public context: ExecutionContext<TParent> = this;），因此每个视图实例本身就是一层执行上下文，parentContext构成了视图之间、指令之间的上下文链。

3.2 repeat 指令的上下文链构建

repeat指令是嵌套上下文最典型的来源。在 repeat.ts 中，无论是bindWithoutPositioning（非定位模式）还是bindWithPositioning（定位模式，额外维护length与index），在绑定子项视图之前都会执行同样的两步：

view.context.parent = controller.source; // 记录父级数据源 view.context.parentContext = controller.context; // 记录父级执行上下文 view.bind(items[index]); // 绑定当前项

这意味着：每次repeat迭代生成子视图时，子视图的parentContext都会指向上一次绑定它的控制器的上下文。当repeat嵌套repeat时，这条链会逐层串联：最内层视图的parentContext→ 中层视图上下文 → 其parentContext→ 外层视图上下文，形成一个可沿链回溯的数据访问路径。

3.3 其他指令与模板场景

when指令通过 when.ts 中的dataBinding(source, context)接收执行上下文并决定渲染哪个模板，其内部生成的条件视图同样处于嵌套上下文中。此外，children、slotted以及自定义模板组合产生的嵌套视图，都属于"嵌套上下文场景"，在这些场景中parentContext的存在保证了绑定表达式始终能回溯到外层上下文。

四、泛型TGrandparent与类型安全

签名parentContext: ExecutionContext<TGrandparent>中的泛型参数是 FAST Element 为嵌套绑定提供的类型安全机制。当编写如下模板时：

repeat( x => x.users, html<User, Person>` <p>${(person, context) => context.parentContext?.index}</p> ` )

context.parentContext的类型会由泛型推导为ExecutionContext<User>（对应外层数据源类型），而非笼统的any，从而在编译期即可检查对外层上下文属性的访问是否正确。这在大型模板系统中显著降低了嵌套绑定的出错概率。

五、在绑定表达式中使用parentContext的实战示例

5.1 读取外层 repeat 的索引

当内层repeat需要知道"外层遍历进行到第几项"时，parentContext.index是标准解法：

html<App>` <template> ${repeat( x => x.orders, html<Order, App>` <div> ${repeat( x => x.items, html<Item, Order>` <p>Order #${(item, c) => c.parentContext!.index + 1}</p> ` )} </div> ` )} </template> `

这里内层绑定表达式通过c.parentContext!.index拿到了外层订单的索引（index从 0 开始，故加 1）。

5.2 沿链回溯多层数据

由于parentContext本身又是一个ExecutionContext，它同样拥有parentContext属性，因此可以连续回溯多层：

html<App>` ${repeat( x => x.teams, html<Team, App>` ${repeat( x => x.members, html<Member, Team>` <!-- 回溯两层：成员 → 团队 → 应用 --> <p>${(m, c) => c.parentContext!.parentContext!.parent!.appName}</p> ` )} ` )} `

注意各层的类型：最内层c.parentContext类型为ExecutionContext<Team>，其.parentContext类型为ExecutionContext<App>，因此最终parent可取到应用级数据。这正是TGrandparent泛型逐层收窄带来的类型安全保障。

5.3 结合条件渲染

when指令同样产生嵌套上下文，其回调接收(source, context)，其中context.parentContext可访问外部作用域：

html<App>` <template> ${when( x => x.isAdmin, html<App>` ${repeat( x => x.auditLog, html<LogEntry, App>` <p>${(log, c) => c.parentContext!.parent!.isAdmin ? 'admin' : 'user'}</p> ` )} ` )} </template> `

六、与声明式模板 schema 的呼应

值得补充的是，FAST Element 的声明式模板系统也在 schema 层面记录了上下文链信息。在 components/schema.ts 中，CachedPathCommon专门定义了：

export interface CachedPathCommon { parentContext: string | null; currentContext: string | null; path: string; }

解析模板时缓存的每一条路径都会记录其parentContext与currentContext；addContext（schema.ts）在向 JSON Schema 的$defs写入上下文时，也会通过getParentContexts递归收集祖先上下文列表并写入$fast_parent_contexts元数据。这说明"父子上下文链"不仅是运行时绑定机制，也是声明式模板 schema 建模中的一等概念，二者语义一致：上下文沿repeat、when等指令逐层嵌套，并在 schema 中可被静态推导。

七、使用注意事项

1. 顶层视图的parentContext为undefined：当视图不在任何嵌套指令中时，其parentContext未被赋值。从 repeat.ts 可以看到，赋值发生在指令绑定子视图时，因此顶层模板中访问parentContext应做空值防护（如c.parentContext?.index）。
2. parentContext是运行时写入的：它由视图绑定流程维护，不要在模板编译期依赖它的具体值。
3. 优先用parent读取数据，用parentContext读取上下文状态：二者分工不同，混用会造成对数据与运行时信息的混淆。
4. 1.x API 文档以当前仓库为准：本文所引 API 描述与签名均来自仓库内 1.x API 文档 及 observable.ts 源码，使用时以仓库内对应版本的实际发布物为准。

总结

ExecutionContext.parentContext是 FAST Element 嵌套模板绑定体系的关键一环：它在repeat等指令绑定子视图时被自动写入，将每一层视图的执行上下文串联成链，让绑定表达式得以跨层级回溯索引、长度、事件等上下文状态，并通过ExecutionContext<TGrandparent>泛型保证类型安全。理解它，你就能在复杂的嵌套列表与条件渲染场景中写出既正确又类型明确的绑定代码。

• 前端
• UI组件