javascript 如何在Handlebars中获取每个助手的索引?

dtcbnfnu  于 2023-05-12  发布在  Java
关注(0)|答案(9)|浏览(184)

我在项目中使用Handlebars作为模板。有没有一种方法可以获取Handlebars中"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>
xqk2d5yq

xqk2d5yq1#

在较新版本的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}}
pvabu6sv

pvabu6sv2#

在车把3.0版本以后,

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

在此特定示例中,user将具有与当前上下文相同的值,并且userId将具有用于迭代的索引值。参考块帮助器部分中的-http://handlebarsjs.com/block_helpers.html

z5btuh9x

z5btuh9x3#

这在Ember的新版本中有所改变。
对于阵列:

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

看起来#each块不再对对象起作用。我的建议是为它滚动你自己的helper函数。
谢谢tip

wooyq4lh

wooyq4lh4#

我知道这太晚了。我用下面的代码解决了这个问题:
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}}

谢谢

sbdsn5lh

sbdsn5lh5#

阵列:

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

egmofgnx

egmofgnx6#

在hbs中使用循环有点复杂

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

了解更多

sdnqo3pr

sdnqo3pr7#

在车把4.0版本以后

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

ua4mk5z48#

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

bqujaahr

bqujaahr9#

如果要以0开始索引

<tbody>
 {{#each item}}
     <tr>
        <td>{{@index}}</td>
        <td>{{this.key}}</td>
        <td>{{this.value}}</td>
     </tr>
 {{/each}}

如果你想用1开始索引。
在JavaScript中

Handlebars.registerHelper('print', function(value) {
    return ++value
});

在HTML文件中

<tbody>
 {{#each item}}
     <tr>
        <td>{{print @index}}</td>
        <td>{{this.key}}</td>
        <td>{{this.value}}</td>
     </tr>
 {{/each}}

相关问题