我在我的项目中使用模版把手。是否有一种方法可以获得句柄中“each”helper的当前迭代的索引?
<tbody>
{{#each item}}
<tr>
<td><!--HOW TO GET ARRAY INDEX HERE?--></td>
<td>{{this.key}}</td>
<td>{{this.value}}</td>
</tr>
{{/each}}
</tbody>
当前回答
我知道这太迟了。但是我用以下代码解决了这个问题:
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:
{{#eachData items}}
{{index}} // You got here start with 0 index
{{/eachData}}
如果你想以1开始你的索引，你应该做以下代码:
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:
{{#eachData items}}
{{math index "+" 1}} // You got here start with 1 index
{{/eachData}}
谢谢。
其他回答
在hbs中使用循环有点复杂
<tbody>
{{#each item}}
<tr>
<td><!--HOW TO GET ARRAY INDEX HERE?--></td>
<td>{{@index}}</td>
<td>{{this}}</td>
</tr>
{{/each}}
</tbody>
了解更多
我知道这太迟了。但是我用以下代码解决了这个问题:
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:
{{#eachData items}}
{{index}} // You got here start with 0 index
{{/eachData}}
如果你想以1开始你的索引，你应该做以下代码:
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:
{{#eachData items}}
{{math index "+" 1}} // You got here start with 1 index
{{/eachData}}
谢谢。
这在新版本的烬中有所改变。
数组:
{{#each array}}
{{_view.contentIndex}}: {{this}}
{{/each}}
看起来#each块不再适用于对象。我的建议是为它滚动您自己的helper函数。
谢谢你的建议。
在车把3.0版本以后，
{{#each users as |user userId|}}
Id: {{userId}} Name: {{user.name}}
{{/each}}
在这个特殊的例子中，user将拥有与当前上下文相同的值，而userId将拥有迭代的索引值。 参考- http://handlebarsjs.com/block_helpers.html在block helpers部分
< tbody > {{#每选修课}} < tr > < th范围= >“划”{{@index}} < / th > < td >{{这个。name}} < / td > < td >{{这个风貌}}< / td >。 < td >{{这个。createdAt}} < / td > < / tr > 每- {{}} < / tbody >
