javascript Handlebars 的 if 语句中的条件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21094459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Condition in Handlebars' if statement
提问by ThePianist
I'm getting to know Handlebars.js and I would have a question for the community. I know I have a lot more to learn and I'm on my way, but I'd like to see an example to this problem.
我开始了解 Handlebars.js,我想问社区一个问题。我知道我还有很多东西要学,而且我还在路上,但我想看看这个问题的例子。
The array created in JS with the objects:
在 JS 中使用对象创建的数组:
var data =
[
{
Field: "id",
Type: "int(11)",
Null: "NO",
Key: "PRI",
Default: null,
Extra: "auto_increment"
},
{
Field: "id2",
Type: "int(131)",
Null: "N3O",
Key: "PR3I",
Default: null,
Extra: "auto_increment"
}
];
The format is this because the JSON I receive from the server will look like the exact way, but now for testing I didn't want to make an ajax call.
格式是这样的,因为我从服务器收到的 JSON 看起来像确切的方式,但现在为了测试我不想进行 ajax 调用。
The template:
模板:
<table>
<thead>
<tr>
{{#each this}}
{{#only_once this}}
{{#key_value this}}
<th>{{key}}</th>
{{/key_value }}
{{/only_once}}
{{/each}}
</tr>
</thead>
...
Because the objects are in an array, I have to loop firstly the array with {{#each}}
then there comes a registered helper (I found on github) that help me get the key because I want to write only them to the thead.
因为对象在一个数组中,所以我必须首先循环数组,{{#each}}
然后有一个注册的帮助程序(我在 github 上找到)帮助我获取密钥,因为我只想将它们写入顶部。
Without my if statement it works fine, fill in the thead with the keys, but because there are 2 objects, it prints out the names twice.
没有我的 if 语句它工作正常,用键填充 thead,但因为有 2 个对象,它打印出名称两次。
My problem is that I want to print them only once and an if would solve my problem that checks if the index of the array is greater than 0 to stop printing out the data, but..
我的问题是我只想打印它们一次,如果可以解决我的问题,即检查数组的索引是否大于 0 以停止打印数据,但是..
.. Handlebars doesn't support conditional statements, so code like {{#if x > y}}
isn't possible. What do you guys think would be the best solution for it?
.. Handlebars 不支持条件语句,所以类似的代码{{#if x > y}}
是不可能的。你们认为最好的解决方案是什么?
Handlebars.registerHelper("only_once", function(item, fn){
var buffer;
var i = 0;
if (i > 0) {
buffer = false;
}
i++;
return buffer;
});
Well, I tried to write a helper, but I think I did something wrong. My theory was that I give to my if the 'this
' in the template as it (I think) points back to the array and then increase the i
to check if the index of the array is > than 0, finally if it's true than send back a false - so I thought it will say to the if that don't run the code inside, but I though wrongly.
好吧,我试图写一个助手,但我认为我做错了什么。我的理论是,如果this
模板中的“ ”(我认为)指向数组,然后增加它i
以检查数组的索引是否大于 0,最后如果它为真,则返回给我一个错误 - 所以我认为它会说如果不在里面运行代码,但我虽然错了。
回答by veducm
As stated in this other SO answerand as @SimonBoudrias mentioned in his answer, since Handlebars 1.1.0, {{@first}}
is natively supported by {{#each}}
helper.
正如在陈述这个其他SO答案,因为和在他的回答中提到@SimonBoudrias,把手1.1.0,{{@first}}
是原生支持{{#each}}
帮手。
Therefore, you can print all attribute names for the first object in an arrayby using only handlebars native helpers as follows:
因此,您可以仅使用 handlebars 本机助手来打印数组中第一个对象的所有属性名称,如下所示:
{{#each array}}
{{#if {{@first}}}}
<!-- It is the first object on the array, print the key for each attribute -->
{{#each this}}
<th>{{@key}}</th>
{{/each}}
{{/if}}
{{/each}}
Additional note about adding conditional if statements to Handlebars:
关于向 Handlebars 添加条件 if 语句的附加说明:
Handlebarsis a logic-less templating systemso it does not include logical statements.
Handlebars是一个无逻辑的模板系统,因此它不包含逻辑语句。
Still, if you want to do it using templates and Handlebars, you could solve this by writing a helper, as explained in this SO answer. In your case, the helper could be something like:
尽管如此,如果您想使用模板和 Handlebars 来完成此操作,您可以通过编写一个帮助程序来解决此问题,如此SO answer 中所述。在你的情况下,助手可能是这样的:
Handlebars.registerHelper('ifIsZero', function(value, options) {
if(value === 0) {
return options.fn(this);
}
return options.inverse(this);
});
Then, you can call it in your template as follows to do something only if the index is equal to 0:
然后,您可以在模板中调用它,如下所示,仅当索引等于 0 时才执行某些操作:
{{#each array}}
{{#ifIsZero {{@index}}}}
<!-- @index is equal to 0, do something -->
<!-- eg. print the key for each attribute of the object using {{@key}} -->
{{#each object}}
<th>{{@key}}</th>
{{/each}}
{{else}}
<!-- otherwise, do something else -->
{{/ifIsZero}}
{{/each}}
回答by Simon Boudrias
Handlebars offers helpers when you're looping an array. I don't think you'll need any custom helpers.
当您循环数组时,Handlebars 会提供帮助程序。我认为您不需要任何自定义助手。
{{ @index }}
return the index (0, 1, 2...){{ @key }}
return the key (Field, Type, etc){{ @first }}
boolean to mark if this is the first row in the array{{ @last }}
boolean to mark if this is the last row in the array
{{ @index }}
返回索引 (0, 1, 2...){{ @key }}
返回键(字段、类型等){{ @first }}
布尔值来标记这是否是数组中的第一行{{ @last }}
布尔值来标记这是否是数组中的最后一行