You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

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

火山引擎 最新活动