如何玩转Handlebars.js块表达式循环渲染列表与条件分支的终极指南【免费下载链接】handlebars.jsMinimal templating on steroids.项目地址: https://gitcode.com/gh_mirrors/ha/handlebars.jsHandlebars.js 是一款流行的 JavaScript 模板引擎而**块表达式Block Expressions**正是它区别于普通 Mustache 模板的核心超能力用#each循环渲染列表、用#if做条件分支、用#with切换上下文。本文面向新手用最少代码带你一次性掌握这三大利器。一、什么是块表达式比 Mustache 多出来的能力在 Mustache 里{{#list}}这种节只是隐式的遍历而在 Handlebars.js 中同一个语法变成了可调用的块级辅助函数Block Helper——你可以显式控制循环逻辑、条件判断和上下文切换还能自定义任意行为。官方说明块表达式与 Mustache 节语法相同但遇到重名时辅助函数优先。详见 README.md。基本长这样ul {{#each products}} li{{name}}/li {{/each}} /ul二、#each 块表达式快速实现列表循环渲染#each是最常用的块表达式负责遍历数组并逐项渲染。内置实现见 each.js。1. 基础循环一行搞定列表{{#each kids}} p{{name}} is {{age}}/p {{/each}}配合数据{ kids: [{name: Jimmy, age: 12}, {name: Sally, age: 4}] }即可渲染出两个p列表项。2. 内置变量循环中的小秘书源码中可以看到每次迭代都会向上下文注入index、key、first、last等数据each.js在模板里用前缀即可取用内置变量含义index当前项的下标从 0 开始key当前项的键名first是否为第一项last是否为最后一项{{#each users}} li{{index}}. {{this}}/li {{/each}}3. 遍历对象而不只是数组#each不只认数组普通对象会按键名逐个遍历each.js此时key是对象的属性名非常适合渲染键值对表单。4. 空数据的 else 分支当列表为空时#each会执行else分支即inverse这是做暂无数据提示的标准姿势{{#each orders}} trtd{{product}}/td/tr {{else}} p暂无订单 /p {{/each}}三、#if 与 #unless条件分支精准控制渲染#if块表达式负责有则渲染、无则隐藏实现逻辑在 if.js。1. 真值判断规则值为真值且非空时渲染块内内容否则执行else分支。{{#if isLoggedIn}} span欢迎回来{{name}}/span {{else}} a href#请先登录/a {{/if}}2. 小心数字 0includeZero 选项0默认被视为空会走 else 分支。如果希望0也走正面分支比如渲染库存数量加上includeZero参数即可源码中的判断逻辑见 if.js{{#if stock includeZero}} 库存{{stock}} 件 {{/if}}3. #unless反过来的 if#unless就是#if的镜像条件为假时才渲染块内内容if.js写法更直白{{#unless isVip}} button开通会员/button {{/unless}}四、#with 块表达式切换上下文更优雅#with会把当前上下文临时换成指定对象块内直接用属性名即可省去一层{{user.name}}式的路径。实现见 with.js{{#with profile}} h1{{name}}/h1 p{{bio}}/p {{else}} p还没有资料/p {{/with}}上下文为空时同样支持else分支非常适合资料卡这类可选模块。五、组合实战列表 条件 上下文一气呵成真实页面往往是三者叠加例如渲染订单列表并高亮新订单{{#each orders}} {{#with .}} div classorder {{#if isNew}}new{{/if}} {{#each items}} span{{name}} ×{{qty}}/span {{/each}} /div {{/with}} {{else}} p暂无订单/p {{/each}}嵌套块表达式在测试用例中已被充分验证参考 spec/blocks.js 中的{{#each person}}{{#with .}}...组合写法。六、常见坑与避坑清单块名未注册会静默降级如果{{#foo}}对应的辅助函数不存在Handlebars 会回退到 Mustache 式的隐式遍历block-helper-missing.js排查为什么没报错但输出不对时优先检查这一点。0 与空字符串会被判空需要渲染0时记得加includeZero。{{后不能有空格{{ #each是非法的#必须紧跟左花括号这是 Handlebars 与 Mustache 的一个语法差异见 README.md。所有默认辅助函数集中注册each、if、unless、with、log、lookup等统一在 helpers.js 中注册自定义辅助函数也可用同样的registerHelper机制扩展。七、源码导航按需深入循环渲染lib/handlebars/helpers/each.js条件分支lib/handlebars/helpers/if.js上下文切换lib/handlebars/helpers/with.js辅助函数注册入口lib/handlebars/helpers.js块表达式行为测试spec/blocks.js编译器 API 文档docs/compiler-api.md掌握#each、#if、#with这三件套就基本覆盖了 Handlebars.js 模板中 90% 的列表与分支场景。动手改改上面的示例、看看spec/blocks.js里的真实断言你会对块表达式有更扎实的体感。【免费下载链接】handlebars.jsMinimal templating on steroids.项目地址: https://gitcode.com/gh_mirrors/ha/handlebars.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考