在handlebars JS中是否有一种方法可以将逻辑操作符合并到标准handlebars. JS条件操作符中?就像这样:
{{#if section1 || section2}}
.. content
{{/if}}
我知道我可以编写自己的助手,但首先我想确保我没有重复工作。
在handlebars JS中是否有一种方法可以将逻辑操作符合并到标准handlebars. JS条件操作符中?就像这样:
{{#if section1 || section2}}
.. content
{{/if}}
我知道我可以编写自己的助手,但首先我想确保我没有重复工作。
当前回答
刚从谷歌搜索到这篇文章,关于如何检查一个字符串是否等于另一个字符串。
我在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}}
其他回答
我可以理解为什么你想要创建一个helper的情况下,你有大量不同的比较在你的模板中执行,但相对较少的比较(甚至是一个,这是把我带到这个页面的第一个位置),它可能只是更容易定义一个新的句柄变量在你的视图渲染函数调用,如:
传递到渲染手柄:
var context= {
'section1' : section1,
'section2' : section2,
'section1or2' : (section1)||(section2)
};
然后在handlebars模板中:
{{#if section1or2}}
.. content
{{/if}}
我提到这一点是为了简单起见,也因为这是一个可能快速且有帮助的答案,同时仍然符合Handlebars的无逻辑性质。
改进的解决方案,基本上适用于任何二进制操作符(至少数字,字符串不适用于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);
}
});
如果您只是想检查一个元素或另一个元素是否存在,您可以使用这个自定义帮助器
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}}
如果你还需要能够有一个“或”来比较 函数返回值 我宁愿添加另一个返回所需结果的属性。
模板应该是无逻辑的!
通过运行以下命令安装烬真相助手插件
Ember安装Ember -truth-helpers
您可以开始使用大多数逻辑运算符(eq,not-eq,not,and,or,gt,gte,lt,lte,xor)。
{{#if (or section1 section2)}}
...content
{{/if}}
你甚至可以包含子表达式来更进一步,
{{#if (or (eq section1 "section1") (eq section2 "section2") ) }}
...content
{{/if}}
AND/OR的正确解
Handlebars.registerHelper('and', function () {
// Get function args and remove last one (function name)
return Array.prototype.slice.call(arguments, 0, arguments.length - 1).every(Boolean);
});
Handlebars.registerHelper('or', function () {
// Get function args and remove last one (function name)
return Array.prototype.slice.call(arguments, 0, arguments.length - 1).some(Boolean);
});
然后按如下方式调用
{{#if (or (eq questionType 'STARTTIME') (eq questionType 'ENDTIME') (..) ) }}
顺便说一句:注意,这里给出的解决方案是不正确的,他没有减去最后一个参数,也就是函数名。 https://stackoverflow.com/a/31632215/1005607
他最初的AND/OR是基于完整的论证列表
and: function () {
return Array.prototype.slice.call(arguments).every(Boolean);
},
or: function () {
return Array.prototype.slice.call(arguments).some(Boolean);
}
有人能改一下答案吗?我刚刚浪费了一个小时试图修正一个由86人推荐的答案。修复方法是过滤掉函数名的最后一个参数。Array.prototype.slice。调用(arguments, 0, arguments。长度- 1)