如何在把手中获得每个助手的索引?

小开

最佳答案

在Handlebars的新版本中，索引(或对象迭代情况下的键)默认由标准的each helper提供。

https://github.com/wycats/handlebars.js/issues/250#issuecomment-9514811的代码片段

当前数组项的索引已经通过@index可用一段时间了:

\{\{#each array}}
\{\{@index}}: \{\{this}}
\{\{/each}}

对于对象迭代，使用@key代替:

\{\{#each object}}
\{\{@key}}: \{\{this}}
\{\{/each}}

小开

这在新版本的烬中有所改变。

数组:

\{\{#each array}}
\{\{_view.contentIndex}}: \{\{this}}
\{\{/each}}

看起来#each块不再适用于对象。我的建议是为它滚动您自己的helper函数。

谢谢你的提示。

小开

我知道这太迟了。但是我用以下代码解决了这个问题:

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}}

谢谢。

小开

在车把3.0版本以后，

\{\{#each users as |user userId|}}
Id: \{\{userId}} Name: \{\{user.name}}
\{\{/each}}

在这个特殊的例子中，user将拥有与当前上下文相同的值，而userId将拥有迭代的索引值。在block helpers section

中引用- http://handlebarsjs.com/block_helpers.html

小开

数组:

\{\{#each array}}
\{\{@index}}: \{\{this}}
\{\{/each}}

如果你有对象数组……你可以遍历子节点:

\{\{#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}}

对象:

\{\{#each object}}
\{\{@key}}: \{\{this}}
\{\{/each}}

如果你有嵌套对象，你可以访问父对象的key \{\{@../key}} < / p >

小开

在车把版4.0以后，

\{\{#list array}}
\{\{@index}}
\{\{/list}}

小开

在hbs中使用循环有点复杂

<tbody>
\{\{#each item}}
<tr>
<td><!--HOW TO GET ARRAY INDEX HERE?--></td>
<td>\{\{@index}}</td>
<td>\{\{this}}</td>
</tr>
\{\{/each}}
</tbody>

了解更多

小开

    <tbody>
\{\{#each courses}}
<tr>
<th scope="row">\{\{@index}}</th>
<td>\{\{this.name}}</td>
<td>\{\{this.description}}</td>
<td>\{\{this.createdAt}}</td>
</tr>
\{\{/each}}
</tbody>