Mustache 本身不支持 {{#if condition}} 这类语法，但可通过 section 标签（{{#key}}...{{/key}}）结合数据结构设计，优雅实现 中 selected 属性的动态添加。本文详解两种推荐实践：布尔字段映射法与数组驱动法，并附可运行示例。
mustache 本身不支持 `{{#if condition}}` 这类语法，但可通过 section 标签（`{{#key}}...{{/key}}`）结合数据结构设计，优雅实现 `
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。
? 总结与最佳实践建议
| 场景 | 推荐方案 | 关键动作 |
|---|---|---|
| 快速修复遗留模板、数据结构固定 | 布尔字段映射法 | 后端/JS 层添加 choseXXX 字段 |
| 新项目、需长期维护、选项可能增减 | 数组驱动法 | 将选项定义为数据数组，模板用 {{#goals}}...{{/goals}} 渲染 |
务必牢记：Mustache 的“条件渲染”本质是数据驱动的布尔开关，而非模板内计算。把判断逻辑移出模板、注入数据，不仅符合引擎设计哲学，更能提升性能、可测性与协作效率。实际开发中，建议封装预处理函数（如 buildSelectData(options, currentCategory)），统一管理这类转换逻辑。
? 提示：可前往 Wontache Playground 粘贴文中的 JSON 数据与模板代码，实时验证效果。
