FAST Element 中的 ExecutionContext.isEven：repeat 列表项偶索引判断的源码级解析

前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载导读本文聚焦 microsoft/fast-element 模板系统中ExecutionContext.isEven属性它用于在repeat列表渲染上下文中判断当前渲染项的下标是否为偶数是快速实现斑马纹zebra striping、奇偶行差异化样式等 UI 效果的关键工具。读完本文你将掌握isEven的精确语义、底层实现原理index % 2 0、与之配套的isOdd/isFirst/isInMiddle/isLast兄弟属性以及如何在真实组件模板中安全地启用并组合使用它们。ExecutionContextrepeat 上下文中的“环境变量”在 FAST Element 中模板表达式并非只接收当前数据源x。当你在html模板中书写绑定表达式时它实际上接收两个参数(x, c) ... // x 为当前数据源c 为当前 ExecutionContextExecutionContext是 FAST Element 提供给模板绑定表达式与行为的“上下文信息集合”其接口定义位于 packages/fast-element/src/observation/observable.ts#L494-L559export interface ExecutionContextTParent any { index: number; // 当前项在 repeat 集合中的下标 length: number; // 当前集合的长度 parent: TParent; // 嵌套上下文中的父数据源 parentContext: ExecutionContextTParent; // 嵌套场景下的父执行上下文 readonly event: Event; // 事件处理器中的当前事件 readonly isEven: boolean; // 当前项下标是否为偶数 readonly isOdd: boolean; // 当前项下标是否为奇数 readonly isFirst: boolean; // 是否为集合首项 readonly isInMiddle: boolean; // 是否位于集合中间 readonly isLast: boolean; // 是否为集合末项 eventDetailTDetail(): TDetail; // 自定义事件的类型化 detail eventTargetTTarget extends EventTarget(): TTarget; // 类型化的事件目标 }index、length与五个is*布尔属性构成了一组完整的“定位信息”而isEven正是其中最基础的奇偶判断之一。它只在repeat 上下文中具有实际意义——即模板中存在repeat指令、且该指令开启了positioning选项时。isEven 的签名与官方语义本文的关联文档fast-element.executioncontext.iseven.md给出的签名如下get isEven(): boolean;官方语义说明为Indicates whether the current item within a repeat context has an even index.指示 repeat 上下文中当前项的下标是否为偶数。几点关键语义需要明确isEven是一个getter只读属性不能在模板或代码中对其赋值它的判定对象是“repeat 上下文中的当前项”因此脱离 repeat 时该属性没有业务意义尽管 getter 本身总是可计算它返回boolean可直接嵌入类名绑定、条件绑定等表达式中。底层实现index % 2 0isEven的运行时实现位于模板视图的默认上下文类DefaultExecutionContext中见 packages/fast-element/src/templating/view.ts#L155-L159public get isEven(): boolean { return this.index % 2 0; }也就是说isEven并非独立维护的标志位而是每次访问时基于index动态计算的派生值。这意味着当index变化如集合重排、增删后下标前移时isEven会自动反映最新结果无需额外同步与其同族的isOdd对应实现为index % 2 ! 0view.ts#L165-L167两者严格互补isFirst/isLast/isInMiddle同样由index与length派生可参阅 view.ts#L173-L191。关键前提repeat 的 positioning 选项index与length并不会在每次 repeat 渲染时自动写入子视图上下文。在 packages/fast-element/src/templating/repeat.ts 中可以看到两种绑定路径const defaultRepeatOptions: RepeatOptions Object.freeze({ positioning: false, // 默认关闭定位信息 recycle: true, // 默认开启视图回收 });function bindWithoutPositioning(view, items, index, controller): void { view.context.parent controller.source; view.context.parentContext controller.context; view.bind(items[index]); } function bindWithPositioning(view, items, index, controller): void { view.context.parent controller.source; view.context.parentContext controller.context; view.context.length items.length; view.context.index index; view.bind(items[index]); }可见RepeatBehavior的构造函数会根据directive.options.positioning选择bindWithPositioning还是bindWithoutPositioningrepeat.ts#L158-L161if (directive.options.positioning) { this.bindView bindWithPositioning; }结论只有为repeat传入{ positioning: true }选项index才会被写入子视图上下文isEven以及isOdd、isFirst、isLast、isInMiddle才能真正反映当前项的位置。默认配置下这些属性将停留在默认值index: 0、length: 0此时isEven恒为true使用时务必注意这一点。实战在 repeat 中实现斑马纹列表下面基于 examples/csr/todo-app/src/todo-app.template.ts 的 todo 列表结构给出一个可直接运行的斑马纹示例。核心是给repeat传入positioning: true然后在类名或样式绑定中消费c.isEvenimport { html, repeat } from microsoft/fast-element; const template htmlTodo[], TodoApp ul classtodo-list ${repeat( x x.filteredTodos, // 数据绑定返回数组 htmlTodo, TodoApp li classtodo-item ${(x, c) (c.isEven ? row-even : row-odd)} span${x x.description}/span /li , { positioning: true }, // 关键开启定位信息 )} /ul ;对应的 CSS 即可实现奇偶行交替配色.todo-item.row-even { background: #fafafa; } .todo-item.row-odd { background: #ffffff; }如果使用repeat的位置参数x为当前项、c为上下文在嵌套 repeat场景下还能通过c.parentContext或c.parent访问外层上下文与父级数据源配合parentContext.isEven实现“分组内交替”的复杂行样式。示例项目 todo-app.template.ts 中的(x, c) c.parent.toggle(x)展示了如何通过上下文访问父数据源方法可作为嵌套上下文用法的参考。测试验证五种边界场景全部覆盖isEven的行为在 packages/fast-element/src/templating/view.pw.spec.ts#L536-L636 中有系统性的 Playwright 测试覆盖测试场景表精确枚举了各类边界场景indexlengthisEvenisOddisFirstisLasteven is first042truefalsetruefalseodd in middle742falsetruefalsefalseeven in middle842truefalsefalsefalseodd at end4142falsetruefalsetrueeven at end4041truefalsefalsetrue测试通过itemContext.index s.index设置上下文下标随后断言itemContext.isEven与场景预期一致view.pw.spec.ts#L628-L634。另一组用例view.pw.spec.ts#L638-L721验证了动态更新index与length后isEven能随之正确变化印证了其“派生值”的实现特性。这些测试还印证了几个易踩坑的点isEven基于从 0 开始的下标首项index 0属于偶数因此isEven与 UI 直觉中的“第 1 行”并不对应isEven与isLast可以同时为true见 “even at end” 场景index 40、length 41因为它们是相互独立的派生属性。使用建议与注意事项务必开启positioning: true未开启时index恒为默认值 0isEven永远返回true奇偶样式会失效。若你的模板同时需要index做绝对定位计算如表格序号列同样依赖该选项isEven是只读 getter类型签名readonly isEven: boolean意味着它只用于消费不要尝试在ExecutionContext上覆写或注入与isOdd严格互补isEven !isOdd恒成立index % 2 0与index % 2 ! 0互斥且穷尽二选一使用即可避免在模板中同时引入两个取反表达式派生值即时生效集合发生 splice、sort、reset 等变化时见 repeat.ts#L203-L221 的handleChange视图会按新下标重新绑定上下文isEven自动保持与最新index一致无需手工刷新区分“数据下标”与“DOM 顺序”在开启recycle: true默认时repeat.ts#L296-L304 会复用已卸载的视图实例但每个视图的context.index仍会在重新绑定时被bindWithPositioning更新为当前下标因此斑马纹样式在增删条目后依然正确。小结ExecutionContext.isEven是 FAST Element repeat 模板中“一行代码实现奇偶行差异化”的得力工具。它的实现极简——index % 2 0但其价值在于配合positioning: true选项与index/length派生出的整个定位属性族isOdd、isFirst、isInMiddle、isLast你可以仅靠模板表达式就完成斑马纹、首尾特化、中间态样式等需求且这一切都在 view.ts 与 repeat.ts 的源码中拥有明确、可测试的实现依据。赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐如何在5分钟内开始使用Device.Net新手快速入门指南如何在5分钟内开始使用Device.Net新手快速入门指南 Device.Net是一个强大的C 跨平台连接设备框架让开发者能够轻松与USB、HID等各类设备前端UI组件LeetCode 266 回文排列哈希表奇偶计数判断法详解LeetCode-Book 精选题解LeetCode 266 回文排列哈希表奇偶计数判断法详解LeetCode Book 精选题解 导读 本文基于 LeetCode Book 仓库中 sel示例工程Codox架构探秘深入理解Clojure文档生成工具的核心组件与工作原理Codox架构探秘深入理解Clojure文档生成工具的核心组件与工作原理 Codox是一款专为Clojure项目打造的文档生成工具能够自动从源代码中提取注释上一篇新手必看onnx2torch安装与使用教程 — 3分钟上手ONNX模型转换下一篇掌握sebastian/diff的代码质量工具链7大实用工具全方位保障代码质量创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考