JSRender模板仅第一个if判断被执行问题咨询

问题根因 #

这个问题并非使用对象作为判断数据源导致，通常是两类写法或上下文问题触发：

• 若你使用了{{if}}...{{else if}}...{{/if}}的互斥分支结构，本身逻辑就只会渲染第一个满足条件的分支，和你描述的调整顺序后第一个生效的表现完全吻合。
• 如果你确认写的是三个独立的{{if}}...{{/if}}块，那就是模板渲染上下文偏移导致：当前模板层级下无法直接访问到traits对象，第一个判断触发后后续的traits取值都返回undefined，自然不会渲染。

你可以先在模板中加入{{json traits}}输出traits的完整内容，确认所有属性都正常传入，排除数据本身的问题。

解决方案 #

方案1：明确指定根数据源访问 #

给所有traits的访问加上~root前缀，明确从传入的根对象开始取值，规避上下文偏移问题：

{{if ~root.traits.admin}}
  <div class="icon iconadmin"></div>
{{/if}}
{{if ~root.traits.editor}}
  <div class="icon iconeditor"></div>
{{/if}}
{{if ~root.traits.writer}}
  <div class='icon iconwriter'></div>
{{/if}}

方案2：遍历traits对象渲染（更简洁） #

直接遍历traits的键值对，自动渲染所有值为true的对应图标，不用写多个重复的判断语句：

{{for traits}}
  {{if #data}}
    <div class="icon icon{{:#key}}"></div>
  {{/if}}
{{/for}}

其中#key对应traits的属性名（admin/editor/writer），#data对应属性的布尔值，只要值为true就会生成对应类名的图标元素。

内容的提问来源于stack exchange，提问作者Zac