如何在 Mustache 模板中实现下拉框的选项预选（基于条件渲染）

Mustache 本身不支持 {{#if condition}} 这类语法，但可通过 section 标签（{{#key}}…{{/key}}）结合数据结构设计，优雅实现 中 selected 属性的动态添加。本文详解两种推荐实践：布尔字段映射法与数组驱动法，并附可运行示例。

mustache 本身不支持 `{{#if condition}}` 这类语法，但可通过 section 标签（`{{#key}}…{{/key}}`）结合数据结构设计，优雅实现 `` 中 `selected` 属性的动态添加。本文详解两种推荐实践：布尔字段映射法与数组驱动法，并附可运行示例。

Mustache 是一个逻辑无关（logic-less）模板引擎，这意味着它刻意避免内置 if、else、== 等控制语句。取而代之的是统一的 section 标签（{{#key}}…{{/key}}），其行为完全由数据类型决定：当 key 的值为真值（truthy）时渲染内容，否则跳过。这一特性虽简洁，却要求开发者将“逻辑”前置到数据准备阶段——即在渲染前，将业务判断结果转化为模板可直接消费的布尔字段或结构化数组。

✅ 方案一：布尔字段映射法（轻量适配现有数据）

适用于已有扁平数据结构（如 { “category”: “Option2” }）且不便于大规模重构的场景。核心思路是：在模板渲染前，扩展数据对象，为每个可能选项添加对应布尔字段。

// 假设原始数据 const data = { category: "Option2" };  // 预处理：生成布尔标记字段 const processedData = {   ...data,   choseOption1: data.category === "Option1",   choseOption2: data.category === "Option2",   choseOption3: data.category === "Option3" };

模板中即可使用 section 标签精准控制 selected 属性：

<label for="category">Category</label> <select id="category" name="category">   <option value="Option1" {{#choseOption1}}selected{{/choseOption1}}>Option1</option>   <option value="Option2" {{#choseOption2}}selected{{/choseOption2}}>Option2</option>   <option value="Option3" {{#choseOption3}}selected{{/choseOption3}}>Option3</option> </select>

⚠️ 注意事项：

• {{#choseOptionX}} 中的 choseOptionX 必须是数据对象的顶层属性名，不能是表达式（如 {{#category === “Option1”}} 不合法）；
• 未定义的布尔字段（如 choseOption4）默认为 falsy，无需显式设为 false，安全可靠。

✅ 方案二：数组驱动法（推荐：更清晰、易维护、可扩展）

将选项列表抽象为数据的一部分，彻底消除模板重复与硬编码，大幅提升可维护性与可读性。这是 Mustache “数据即逻辑”哲学的最佳实践。

// 结构化数据：每个选项是一个对象，含 category 和 selected 状态 const data = {   goals: [     { category: "Option1", selected: "selected" },     { category: "Option2" }, // 无 selected 字段 → 自动忽略     { category: "Option3" }   ] };

模板利用 section 标签遍历 goals 数组，并通过 {{selected}} 变量插值直接输出属性值（无需 section 包裹）：

<label for="category">Category</label> <select id="category" name="category">   {{#goals}}   <option value="{{category}}" {{selected}}>{{category}}</option>   {{/goals}} </select>

✅ 优势显著：

• 零重复 HTML：选项结构完全由数据驱动；
• 强扩展性：新增选项只需追加数组元素，无需修改模板；
• 语义清晰：selected: “selected” 直接映射 HTML 属性，符合直觉；
• 兼容性好：即使 selected 字段缺失，{{selected}} 渲染为空字符串，不影响 dom。

? 总结与最佳实践建议

务必牢记：Mustache 的“条件渲染”本质是数据驱动的布尔开关，而非模板内计算。把判断逻辑移出模板、注入数据，不仅符合引擎设计哲学，更能提升性能、可测性与协作效率。实际开发中，建议封装预处理函数（如 buildSelectData(options, currentCategory)），统一管理这类转换逻辑。

? 提示：可前往 Wontache Playground 粘贴文中的 json 数据与模板代码，实时验证效果。