【问题标题】:Handlebar if condition not working如果条件不工作车把
【发布时间】:2018-02-06 17:26:19
【问题描述】:

无法在 Handlbars 模板中使用 if 条件。 下面是我下面的jquery Handlebars函数,

$.each(data.response, function (i, item) {
   var source = $("#my-orders").html();
   var template = Handlebars.compile(source);
   html += template(item);
   //alert(html);
});
if(html){
   $("#myorderss").html(html);
}

当我使用if 条件时,它不起作用。

{{#if id=='1'}}
{{/if}}

如何在车把模板中使用if条件?

【问题讨论】:

  • 尝试 {{#if id}} 因为这会检查“真实”值,否则您可能需要包含“等于”辅助函数以进行更复杂的匹配检查
  • @SajjanSarkar 如果条件和比较id,我必须meke 4,我需要这样做
  • 使用Handlebar helpersstackoverflow.com/questions/8853396/… Handlebars 提供对子表达式的支持,它允许您在一个小胡子中调用多个助手,并将内部助手调用的结果作为参数传递给外部助手.
  • @KunJ 我已经检查过了,但是如何在我的车把中使用?

标签: javascript jquery handlebars.js


【解决方案1】:

这是对 if 条件的误解。 在此处查看#if 文档:http://handlebarsjs.com/builtin_helpers.html

您可以使用 if 助手有条件地渲染一个块。如果它是 参数返回 false、undefined、null、""、0 或 [],Handlebars 将 不渲染方块。

您需要做的是一个车把助手来测试您的状况。

这是我用来进行比较的“测试”助手的一个示例:

Handlebars.registerHelper('test', function(lvalue, operator, rvalue, options) {
    var doDisplay = false;
    var items = (""+rvalue).split("|");
    var arrayLength = items.length;
    for (var i = 0; (i < arrayLength); i++) {
        if (operator == "eq") {
            if (lvalue == items[i]) {
                doDisplay = true;
            }
        } else if (operator == "ne") {
            if (lvalue != items[i]) {
                doDisplay = true;
            }
        } else if (operator == "gt") {
            if (parseFloat(lvalue) > parseFloat(items[i])) {
                doDisplay = true;
            }
        } else if (operator == "lt") {
            if (parseFloat(lvalue) < parseFloat(items[i])) {
                doDisplay = true;
            }
        }else if (operator == "le") {
            if (parseFloat(lvalue) <= parseFloat(items[i])) {
                doDisplay = true;
            }
        }else if (operator == "ge") {
            if (parseFloat(lvalue) >= parseFloat(items[i])) {
                doDisplay = true;
            }
        }
    }
    if (doDisplay) {
        return options.fn(this);
    } else {
        return "";
    }
}); 

下面是你如何调用它,例如,如果你根据测试来测试和显示结果:

{{#test id 'eq' '1'}}
{{id}} equals 1
{{/test}}
{{#test id 'ne' '1'}}
{{id}} do not equals 1
{{/test}}
{{#test id 'ge' '1'}}
{{id}} greater or equals 1
{{/test}}
{{#test id 'ne' '1'}}
{{id}} lower or equals 1
{{/test}}

【讨论】:

  • 如果你知道的足够多,你能详细说明一下吗?阅读 Handlebars 文档,我认为这意味着 if 块的“参数”如果字面上是 false、null、0 等的 Javascript 值,则无法通过测试。但简单地分配该值不起作用的参数。 (例如,'arg': false 传入仍然是真实的。)然后,我可能会注意到它说如果参数“返回 false”......所以参数必须是一个函数,它返回要测试的值。这与我在项目中看到的其他用法以及 Helpers 概念相匹配。但这也行不通。如果要测试该值究竟是什么?
  • 没关系,有点——回答了我自己的问题。找到他们的 GitHub。 #if 似乎接受 Javascript 基本数据类型或函数的值。并且直接为 if 块提供基本数据类型(例如 false、null 等)是有效的——一旦我修复了自己的代码以解决进一步导致 Handlebars 似乎总是评估为“真实”的问题。
猜你喜欢
  • 1970-01-01
  • 2018-01-15
  • 2014-04-03
  • 1970-01-01
  • 2017-05-06
  • 1970-01-01
  • 1970-01-01
  • 2017-03-03
  • 2015-01-01
相关资源
最近更新 更多