Mustache 本身不支持 {{#if condition}} 这类原生条件语法，但可通过 section 标签（{{#key}}...{{/key}}）结合数据结构设计，优雅实现 中 selected 属性的动态添加。本文详解两种主流实践方案，并提供可运行示例。
mustache 本身不支持 `{{#if condition}}` 这类原生条件语法，但可通过 section 标签（`{{#key}}...{{/key}}`）结合数据结构设计，优雅实现 `
Mustache 是一个逻辑无关（logic-less）模板引擎，其核心设计哲学是将展示逻辑完全交由数据层控制，而非在模板中嵌入条件判断。因此，它没有 {{#if category == "Option1"}} 这样的语法。取而代之的是统一的 section 标签：{{#key}}...{{/key}}。该标签的行为取决于 key 对应值的类型——若为真值（truthy），则渲染内容；若为假值（falsy）、null、undefined 或空数组，则跳过。这一机制正是实现“条件性添加 selected 属性”的关键。
✅ 方案一：扩展数据字段（简单直接，适合少量固定选项）
假设你的原始数据仅包含：
{
"category": "Option2"
}你无法直接在模板中比较 category 值，但可以在渲染前对数据做轻量预处理：根据 category 的值，动态注入布尔字段（如 choseOption2: true）。这样，模板即可利用 section 标签精准控制属性：
<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>✅ 优势：改动小、易理解、兼容所有 Mustache 实现。
⚠️ 注意：choseOption1 等字段必须由后端或 JS 渲染逻辑提前注入；未声明的字段（如 choseOption2: false）无需显式设为 false，其缺失即视为 falsy。
✅ 方案二：结构化选项数据（推荐，更可维护、可扩展）
更优解是将静态选项与动态状态分离，采用数组形式组织选项，并为当前选中项标记 selected 属性：
{
"goals": [
{"category": "Option1"},
{"category": "Option2", "selected": "selected"},
{"category": "Option3"}
]
}此时模板可完全消除重复，利用 section 循环 + 内嵌 section（或变量插值）实现动态渲染：
<label for="category">Category</label>
<select id="category" name="category">
{{#goals}}
<option value="{{category}}" {{#selected}}selected{{/selected}}>{{category}}</option>
{{/goals}}
</select>甚至可进一步简化（利用 Mustache 对字符串值的特殊处理）：
<!-- 当 selected 字段值为字符串 "selected" 时，{{selected}} 直接输出该字符串 -->
<option value="{{category}}" {{selected}}>{{category}}</option>✅ 优势：数据驱动、无硬编码、易于增删选项、天然支持国际化与动态加载。
? 提示："selected": "selected" 的写法比 "selected": true 更灵活——前者允许使用简洁的 {{selected}} 变量插值，后者必须用 {{#selected}}selected{{/selected}}。
? 快速验证
你可以将以下 JSON 直接粘贴至 Wontache Playground 的 “Load/Store” 区域，实时查看效果：
{
"data": {
"text": "{\n \"goals\": [\n {\"category\": \"Option1\"},\n {\"category\": \"Option2\", \"selected\": \"selected\"},\n {\"category\": \"Option3\"}\n ]\n}"
},
"templates": [{
"text": "<label for=\"category\">Category</label>\n<select id=\"category\" name=\"category\">\n {{#goals}}\n <option value=\"{{category}}\" {{selected}}>{{category}}</option>\n {{/goals}}\n</select>"
}]
}? 总结
- ❌ Mustache 不支持 {{#if ...}}、{{#unless}} 或比较运算符；
- ✅ 所有条件渲染都基于 {{#key}}...{{/key}} 的真值判断；
- ✅ 最佳实践是在数据准备阶段完成逻辑判断，让模板专注呈现；
- ✅ 对于表单控件（如
通过合理设计数据模型，你不仅能解决预选问题，更能构建出真正符合 Mustache 哲学、健壮且易测试的前端模板系统。
