在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}}
其他回答
我发现了一个用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"}}
我可以理解为什么你想要创建一个helper的情况下,你有大量不同的比较在你的模板中执行,但相对较少的比较(甚至是一个,这是把我带到这个页面的第一个位置),它可能只是更容易定义一个新的句柄变量在你的视图渲染函数调用,如:
传递到渲染手柄:
var context= {
'section1' : section1,
'section2' : section2,
'section1or2' : (section1)||(section2)
};
然后在handlebars模板中:
{{#if section1or2}}
.. content
{{/if}}
我提到这一点是为了简单起见,也因为这是一个可能快速且有帮助的答案,同时仍然符合Handlebars的无逻辑性质。
为了那些生活在边缘的人,把这个提升一个档次。
要点: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.js中,你可以在if块helper中使用内联if helper。它可以替换||逻辑运算符,例如:
{{#if (if firstCondition firstCondition secondCondition)}}
(firstCondition || (or) secondCondition) === true
{{/if}}
如果你想检查多个条件,这里有一个解决方案:
/* Handler to check multiple conditions
*/
Handlebars.registerHelper('checkIf', function (v1,o1,v2,mainOperator,v3,o2,v4,options) {
var operators = {
'==': function(a, b){ return a==b},
'===': function(a, b){ return a===b},
'!=': function(a, b){ return a!=b},
'!==': function(a, b){ return a!==b},
'<': function(a, b){ return a<b},
'<=': function(a, b){ return a<=b},
'>': function(a, b){ return a>b},
'>=': function(a, b){ return a>=b},
'&&': function(a, b){ return a&&b},
'||': function(a, b){ return a||b},
}
var a1 = operators[o1](v1,v2);
var a2 = operators[o2](v3,v4);
var isTrue = operators[mainOperator](a1, a2);
return isTrue ? options.fn(this) : options.inverse(this);
});
用法:
/* if(list.length>0 && public){}*/
{{#checkIf list.length '>' 0 '&&' public '==' true}} <p>condition satisfied</p>{{/checkIf}}