求助：Handlebars.js中基于JSON数据的if条件判断处理问题

我来帮你搞定这个Handlebars条件判断的问题！你遇到的核心问题是条件判断的写法不对——当前上下文里的name是字符串值，不是对象，所以不能用name.Sizes这种方式判断。下面是完整的解决方案：

你的JSON数据（方便参考） #

{
  "lstModel": [
    {"name":"Sizes","values":[{"value":"L"},{"value":"XL"},{"value":"M"}]},
    {"name":"Colours","values":[{"value":"Green"}]}
  ]
}

步骤1：注册相等比较Helper（关键） #

Handlebars默认没有内置的相等比较函数，我们需要先注册一个eq Helper来实现值的相等判断：

Handlebars.registerHelper('eq', function(a, b) {
  // 严格相等判断，确保类型和值都匹配
  return a === b;
});

步骤2：修正后的Handlebars模板 #

<script type="text/x-handlebars-template" id="filter">
  {{#each lstModel}}
    <form class="col-md-6" id="filter-{{name}}">
      <label>Select {{name}}</label>
      {{#if (eq name "Sizes")}}
        <!-- 针对Sizes选项添加特定样式的容器 -->
        <div class="size-selector">
          {{#each values}}
            <div class="entry">{{value}}</div>
          {{/each}}
        </div>
      {{else}}
        <!-- 其他选项使用默认结构 -->
        <div class="default-selector">
          {{#each values}}
            <div class="entry">{{value}}</div>
          {{/each}}
        </div>
      {{/if}}
    </form>
  {{/each}}
</script>

逻辑说明 #

1. 用{{#each lstModel}}遍历所有筛选项（Sizes和Colours）
2. 针对每个项，通过{{#if (eq name "Sizes")}}判断当前项的名称是否为"Sizes"
3. 如果匹配，就渲染带size-selector类的容器（你的特定样式可以写在这个类的CSS里）；否则渲染默认结构
4. 最后用{{#each values}}遍历每个选项的具体值，生成对应的条目

这样就能精准地给Sizes选项添加特定样式，其他选项保持默认布局啦！

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