在handlebars JS中是否有一种方法可以将逻辑操作符合并到标准handlebars. JS条件操作符中?就像这样:
{{#if section1 || section2}}
.. content
{{/if}}
我知道我可以编写自己的助手，但首先我想确保我没有重复工作。
当前回答
您可以使用以下代码:
{{#if selection1}}
doSomething1
{{else}}
{{#if selection2}}
doSomething2
{{/if}}
{{/if}}
其他回答
为了那些生活在边缘的人，把这个提升一个档次。
要点:https://gist.github.com/akhoury/9118682 演示:下面是代码片段
句柄Helper: {{#xif表达式}}{{else}} {{/xif}}
一个helper来执行带有任意表达式的IF语句
EXPRESSION是一个正确转义的字符串 是的，你需要正确转义字符串字面量或只是交替单引号和双引号 您可以访问任何全局函数或属性，即encodeURIComponent(property) 这个例子假设你将这个上下文传递给你的handlebars模板({name: 'Sam'， age: '20'})，注意年龄是一个字符串，只是为了我可以在后面的文章中演示parseInt()
用法:
<p>
{{#xif " name == 'Sam' && age === '12' " }}
BOOM
{{else}}
BAMM
{{/xif}}
</p>
输出
<p>
BOOM
</p>
JavaScript:(这取决于另一个助手-继续阅读)
Handlebars.registerHelper("xif", function (expression, options) {
return Handlebars.helpers["x"].apply(this, [expression, options]) ? options.fn(this) : options.inverse(this);
});
帮助句柄:{{x表达式}}
一个执行javascript表达式的助手
EXPRESSION是一个正确转义的字符串 是的，你需要正确转义字符串字面量或只是交替单引号和双引号 你可以访问任何全局函数或属性，即parseInt(property) 这个例子假设你将这个上下文传递给了你的handlebars模板({name: 'Sam'， age: '20'})，年龄是一个用于演示的字符串，它可以是任何东西。
用法:
<p>Url: {{x "'hi' + name + ', ' + window.location.href + ' <---- this is your href,' + ' your Age is:' + parseInt(this.age, 10)"}}</p>
输出:
<p>Url: hi Sam, http://example.com <---- this is your href, your Age is: 20</p>
JavaScript:
这看起来有点大，因为为了清晰起见，我扩展了语法并注释了几乎每一行
Handlebars.registerHelper("x", function(expression, options) { var result; // you can change the context, or merge it with options.data, options.hash var context = this; // yup, i use 'with' here to expose the context's properties as block variables // you don't need to do {{x 'this.age + 2'}} // but you can also do {{x 'age + 2'}} // HOWEVER including an UNINITIALIZED var in a expression will return undefined as the result. with(context) { result = (function() { try { return eval(expression); } catch (e) { console.warn('•Expression: {{x \'' + expression + '\'}}\n•JS-Error: ', e, '\n•Context: ', context); } }).call(context); // to make eval's lexical this=context } return result; }); Handlebars.registerHelper("xif", function(expression, options) { return Handlebars.helpers["x"].apply(this, [expression, options]) ? options.fn(this) : options.inverse(this); }); var data = [{ firstName: 'Joan', age: '21', email: 'joan@aaa.bbb' }, { firstName: 'Sam', age: '18', email: 'sam@aaa.bbb' }, { firstName: 'Perter', lastName: 'Smith', age: '25', email: 'joseph@aaa.bbb' }]; var source = $("#template").html(); var template = Handlebars.compile(source); $("#main").html(template(data)); h1 { font-size: large; } .content { padding: 10px; } .person { padding: 5px; margin: 5px; border: 1px solid grey; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script> <script id="template" type="text/x-handlebars-template"> <div class="content"> {{#each this}} <div class="person"> <h1>{{x "'Hi ' + firstName"}}, {{x 'lastName'}}</h1> <div>{{x '"you were born in " + ((new Date()).getFullYear() - parseInt(this.age, 10)) '}}</div> {{#xif 'parseInt(age) >= 21'}} login here: <a href="http://foo.bar?email={{x 'encodeURIComponent(email)'}}"> http://foo.bar?email={{x 'encodeURIComponent(email)'}} </a> {{else}} Please go back when you grow up. {{/xif}} </div> {{/each}} </div> </script> <div id="main"></div>
Moar
如果你想访问上层作用域，这个略有不同，表达式是所有参数的JOIN， 用法:说上下文数据是这样的:
// data
{name: 'Sam', age: '20', address: { city: 'yomomaz' } }
// in template
// notice how the expression wrap all the string with quotes, and even the variables
// as they will become strings by the time they hit the helper
// play with it, you will immediately see the errored expressions and figure it out
{{#with address}}
{{z '"hi " + "' ../this.name '" + " you live with " + "' city '"' }}
{{/with}}
Javascript:
Handlebars.registerHelper("z", function () {
var options = arguments[arguments.length - 1]
delete arguments[arguments.length - 1];
return Handlebars.helpers["x"].apply(this, [Array.prototype.slice.call(arguments, 0).join(''), options]);
});
Handlebars.registerHelper("zif", function () {
var options = arguments[arguments.length - 1]
delete arguments[arguments.length - 1];
return Handlebars.helpers["x"].apply(this, [Array.prototype.slice.call(arguments, 0).join(''), options]) ? options.fn(this) : options.inverse(this);
});
通过运行以下命令安装烬真相助手插件
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}}
改进的解决方案，基本上适用于任何二进制操作符(至少数字，字符串不适用于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}}
如果你还需要能够有一个“或”来比较 函数返回值 我宁愿添加另一个返回所需结果的属性。
模板应该是无逻辑的!
我发现了一个用CoffeeScript制作的npm包，它有很多令人难以置信的有用的把手助手。在下面的URL中查看文档:
https://npmjs.org/package/handlebars-helpers
您可以执行wget http://registry.npmjs.org/handlebars-helpers/-/handlebars-helpers-0.2.6.tgz来下载它们并查看包的内容。
您将能够执行如下操作:{{#is number 5}}或{{formatDate date "%m/%d/%Y"}}
