[英]How to get index in Handlebars each helper?
I'm using Handlebars for templating in my project.我在我的项目中使用 Handlebars 进行模板化。 Is there a way to get the index of the current iteration of an "each" helper in Handlebars?
有没有办法在 Handlebars 中获取“每个”助手的当前迭代索引?
<tbody>
{{#each item}}
<tr>
<td><!--HOW TO GET ARRAY INDEX HERE?--></td>
<td>{{this.key}}</td>
<td>{{this.value}}</td>
</tr>
{{/each}}
</tbody>
In the newer versions of Handlebars index (or key in the case of object iteration) is provided by default with the standard each helper.在较新版本的 Handlebars 索引(或对象迭代情况下的键)中,默认情况下为每个助手提供了标准。
snippet from : https://github.com/wycats/handlebars.js/issues/250#issuecomment-9514811摘自: https : //github.com/wycats/handlebars.js/issues/250#issuecomment-9514811
The index of the current array item has been available for some time now via @index:当前数组项的索引已经通过@index 提供了一段时间:
{{#each array}}
{{@index}}: {{this}}
{{/each}}
For object iteration, use @key instead:对于对象迭代,请改用 @key:
{{#each object}}
{{@key}}: {{this}}
{{/each}}
This has changed in the newer versions of Ember.这在较新版本的 Ember 中发生了变化。
For arrays:对于数组:
{{#each array}}
{{_view.contentIndex}}: {{this}}
{{/each}}
It looks like the #each block no longer works on objects.看起来 #each 块不再适用于对象。 My suggestion is to roll your own helper function for it.
我的建议是为它推出你自己的辅助函数。
In handlebar version 3.0 onwards,在车把版本 3.0 以后,
{{#each users as |user userId|}}
Id: {{userId}} Name: {{user.name}}
{{/each}}
In this particular example, user will have the same value as the current context and userId will have the index value for the iteration.在此特定示例中,用户将具有与当前上下文相同的值,而 userId 将具有迭代的索引值。 Refer - http://handlebarsjs.com/block_helpers.html in block helpers section
参考 - http://handlebarsjs.com/block_helpers.html在块助手部分
I know this is too late.我知道这已经太晚了。 But i solved this issue with following Code:
但我用以下代码解决了这个问题:
Java Script: Java脚本:
Handlebars.registerHelper('eachData', function(context, options) {
var fn = options.fn, inverse = options.inverse, ctx;
var ret = "";
if(context && context.length > 0) {
for(var i=0, j=context.length; i<j; i++) {
ctx = Object.create(context[i]);
ctx.index = i;
ret = ret + fn(ctx);
}
} else {
ret = inverse(this);
}
return ret;
});
HTML: HTML:
{{#eachData items}}
{{index}} // You got here start with 0 index
{{/eachData}}
if you want start your index with 1 you should do following code:如果你想用 1 开始你的索引,你应该执行以下代码:
Javascript: Javascript:
Handlebars.registerHelper('eachData', function(context, options) {
var fn = options.fn, inverse = options.inverse, ctx;
var ret = "";
if(context && context.length > 0) {
for(var i=0, j=context.length; i<j; i++) {
ctx = Object.create(context[i]);
ctx.index = i;
ret = ret + fn(ctx);
}
} else {
ret = inverse(this);
}
return ret;
});
Handlebars.registerHelper("math", function(lvalue, operator, rvalue, options) {
lvalue = parseFloat(lvalue);
rvalue = parseFloat(rvalue);
return {
"+": lvalue + rvalue
}[operator];
});
HTML: HTML:
{{#eachData items}}
{{math index "+" 1}} // You got here start with 1 index
{{/eachData}}
Thanks.谢谢。
Arrays:数组:
{{#each array}}
{{@index}}: {{this}}
{{/each}}
If you have arrays of objects... you can iterate through the children:如果您有对象数组……您可以遍历子项:
{{#each array}}
//each this = { key: value, key: value, ...}
{{#each this}}
//each key=@key and value=this of child object
{{@key}}: {{this}}
//Or get index number of parent array looping
{{@../index}}
{{/each}}
{{/each}}
Objects:对象:
{{#each object}}
{{@key}}: {{this}}
{{/each}}
If you have nested objects you can access the key
of parent object with {{@../key}}
如果你有嵌套的对象,你可以访问
key
父对象与{{@../key}}
In handlebar version 4.0 onwards,在车把版本 4.0 以后,
{{#list array}}
{{@index}}
{{/list}}
Using loop in hbs little bit complex在 hbs 中使用循环有点复杂
<tbody>
{{#each item}}
<tr>
<td><!--HOW TO GET ARRAY INDEX HERE?--></td>
<td>{{@index}}</td>
<td>{{this}}</td>
</tr>
{{/each}}
</tbody>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.