
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 哲学、健壮且易测试的前端模板系统。










