在handlebars JS中是否有一种方法可以将逻辑操作符合并到标准handlebars. JS条件操作符中?就像这样:

{{#if section1 || section2}}
.. content
{{/if}}

我知道我可以编写自己的助手,但首先我想确保我没有重复工作。


当前回答

不幸的是,这些解决方案都不能解决“或”操作符“cond1 || cond2”的问题。

检查第一个值是否为真 使用"^"(或)并检查cond2是否为真 {{#如果cond1}} 行动起来 {{^}} {{#如果cond2}} 行动起来 {{/如果}} {{/如果}}

这违反了DRY规则。为什么不用偏微分函数来简化呢

{{#if cond1}}
    {{> subTemplate}}
{{^}}
    {{#if cond2}}
        {{> subTemplate}}
    {{/if}}
{{/if}}

其他回答

这可以通过使用block helper来“欺骗”。这可能违背了开发车把的人的意识形态。

Handlebars.registerHelper('ifCond', function(v1, v2, options) {
  if(v1 === v2) {
    return options.fn(this);
  }
  return options.inverse(this);
});

然后可以像这样调用模板中的helper

{{#ifCond v1 v2}}
    {{v1}} is equal to {{v2}}
{{else}}
    {{v1}} is not equal to {{v2}}
{{/ifCond}}

如果您只是想检查一个元素或另一个元素是否存在,您可以使用这个自定义帮助器

Handlebars.registerHelper('if_or', function(elem1, elem2, options) {
  if (Handlebars.Utils.isEmpty(elem1) && Handlebars.Utils.isEmpty(elem2)) {
    return options.inverse(this);
  } else {
    return options.fn(this);
  }
});

像这样

{{#if_or elem1 elem2}}
  {{elem1}} or {{elem2}} are present
{{else}}
  not present
{{/if_or}}

如果你还需要能够有一个“或”来比较 函数返回值 我宁愿添加另一个返回所需结果的属性。

模板应该是无逻辑的!

改进的解决方案,基本上适用于任何二进制操作符(至少数字,字符串不适用于eval,如果使用用户输入的非定义操作符,请注意可能的脚本注入):

Handlebars.registerHelper("ifCond",function(v1,operator,v2,options) {
    switch (operator)
    {
        case "==":
            return (v1==v2)?options.fn(this):options.inverse(this);

        case "!=":
            return (v1!=v2)?options.fn(this):options.inverse(this);

        case "===":
            return (v1===v2)?options.fn(this):options.inverse(this);

        case "!==":
            return (v1!==v2)?options.fn(this):options.inverse(this);

        case "&&":
            return (v1&&v2)?options.fn(this):options.inverse(this);

        case "||":
            return (v1||v2)?options.fn(this):options.inverse(this);

        case "<":
            return (v1<v2)?options.fn(this):options.inverse(this);

        case "<=":
            return (v1<=v2)?options.fn(this):options.inverse(this);

        case ">":
            return (v1>v2)?options.fn(this):options.inverse(this);

        case ">=":
         return (v1>=v2)?options.fn(this):options.inverse(this);

        default:
            return eval(""+v1+operator+v2)?options.fn(this):options.inverse(this);
    }
});

刚从谷歌搜索到这篇文章,关于如何检查一个字符串是否等于另一个字符串。

我在NodeJS服务器端使用HandlebarsJS,但我也在前端使用浏览器版本的HandlebarsJS来解析它。这意味着如果我想要一个自定义助手,我必须在两个不同的地方定义它,或者将一个函数分配给有问题的对象——太费劲了!!

人们忘记了某些对象具有可以在moustache模板中使用的继承函数。对于字符串:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match

包含整个匹配结果和任何括号捕获的匹配结果的数组;如果没有匹配,则为Null。

我们可以使用此方法返回一个匹配数组,如果没有找到匹配则返回null。这是完美的,因为查看HandlebarsJS文档http://handlebarsjs.com/builtin_helpers.html

你可以使用if helper来有条件地呈现一个块。如果它的参数返回false, undefined, null, "", 0,或[],句柄将不会呈现块。

所以…

{{#if your_string.match "what_youre_looking_for"}} 
String found :)
{{else}}
No match found :(
{{/if}}

更新:

在所有浏览器上测试后,这在Firefox上不起作用。HandlebarsJS将其他参数传递给函数调用,这意味着当String.prototype.match被调用时,第二个参数(即根据上面的文档,匹配函数调用的Regexp标志)似乎正在被传递。Firefox认为这是不赞成使用String.prototype的。匹配,就这样断了。

一个解决方法是为String JS对象声明一个新的函数原型,并使用它:

if(typeof String.includes !== 'function') {
    String.prototype.includes = function(str) {
        if(!(str instanceof RegExp))
            str = new RegExp((str+'').escapeRegExp(),'g');
        return str.test(this);
    }
}

确保在运行Handlebars.compile()函数之前包含此JS代码,然后在模板中…

{{#your_string}}
    {{#if (includes "what_youre_looking_for")}} 
        String found :)
    {{else}}
        No match found :(
    {{/if}}
{{/your_string}}

另一种替代方法是在#if中使用函数名。#if将检测参数是否为函数,如果是,则调用它并使用其返回值进行真实性检查。下面的myFunction得到当前的上下文。

{{#if myFunction}}
  I'm Happy!
{{/if}}