Handlebars模板if条件失效问题咨询:如何正确使用if条件?
解决Handlebars模板中if条件不生效的问题
嘿,我来帮你搞定这个Handlebars的条件判断问题~你之前用的{{#if id=='1'}}写法之所以不生效,是因为Handlebars的内置{{#if}}只判断值的“真假性”(比如是否存在、是否为空、是否是false这些),它不支持直接在括号里写==或者===这类比较表达式。
下面给你三种靠谱的解决方案,你可以根据自己的场景选择:
方案1:提前在数据里处理布尔属性(最简单直接)
在你遍历数据的$.each循环里,给每个item新增一个布尔属性,用来标记是否满足id等于'1'的条件。这样模板里直接判断这个属性就行:
修改后的JS代码:
$.each(data.response, function (i, item) { // 提前计算条件,给item加一个布尔属性 item.isIdEqualToOne = (item.id === '1'); var source = $("#my-orders").html(); var template = Handlebars.compile(source); html += template(item); }); if(html){ $("#myorderss").html(html); }
对应的Handlebars模板:
{{#if isIdEqualToOne}} <!-- 这里放id等于'1'时要显示的内容 --> {{else}} <!-- 其他情况的内容 --> {{/if}}
方案2:使用Handlebars内置的eq helper(适合新版本Handlebars)
如果你的Handlebars是v4.0及以上版本,它自带了eq这个比较helper,直接用它就能实现相等判断:
模板写法:
{{#if (eq id '1')}} <!-- id等于'1'时的内容 --> {{/if}}
注意这里的语法是把eq放在括号里调用,第一个参数是要比较的属性,第二个是目标值。
方案3:自定义一个eq helper(适合旧版本Handlebars)
如果你的Handlebars版本比较老,没有内置eq,那自己注册一个helper就行,一次注册全局可用:
先注册helper(放在模板编译之前):
Handlebars.registerHelper('eq', function(a, b) { // 严格相等判断,确保类型也一致 return a === b; });
然后模板里的写法和方案2一样:
{{#if (eq id '1')}} <!-- 满足条件的内容 --> {{/if}}
小提醒:
注意检查你的item.id类型哦!如果后台返回的id是数字类型(比如1),那比较的时候就要用(eq id 1)而不是'1',避免类型不匹配导致判断失败。
内容的提问来源于stack exchange,提问作者RAHUL PRAJAPATI




