Hoe krijg ik de index in het stuur van elke helper?

Ik gebruik stuur voor sjablonen in mijn project. Is er een manier om de index van de huidige iteratie van een “elke” helper in Handlebars te krijgen?

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

Antwoord 1, autoriteit 100%

In de nieuwere versies van Handlebars wordt de index (of sleutel in het geval van objectiteratie) standaard geleverd met de standaard van elke helper.

fragment van: https://github.com/wycats/handlebars .js/issues/250#issuecomment-9514811

De index van het huidige array-item is al enige tijd beschikbaar via @index:

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

Gebruik in plaats daarvan @key voor objectiteratie:

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

Antwoord 2, autoriteit 3%

Dit is veranderd in de nieuwere versies van Ember.

Voor arrays:

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

Het lijkt erop dat het #each-blok niet langer werkt op objecten. Mijn suggestie is om je eigen helperfunctie ervoor te gebruiken.

Bedankt voor deze tip.

Antwoord 3, autoriteit 3%

Vanaf stuurversie 3.0,

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

In dit specifieke voorbeeld heeft de gebruiker dezelfde waarde als de huidige context en heeft userId de indexwaarde voor de iteratie.
Raadpleeg – http://handlebarsjs.com/block_helpers.htmlin het gedeelte Blokhelpers

Antwoord 4, autoriteit 3%

Ik weet dat dit te laat is. Maar ik heb dit probleem opgelost met de volgende code:

Java-script:

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

als u uw index met 1 wilt beginnen, moet u de volgende code gebruiken:

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

Bedankt.

Antwoord 5

Arrays:

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

Als je arrays met objecten hebt… kun je de onderliggende items doorlopen:

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

Objecten:

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

Als je geneste objecten hebt, heb je toegang tot de keyvan het bovenliggende object met
{{@../key}}

Antwoord 6

Loop in hbs een beetje ingewikkeld gebruiken

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

Meer informatie

Antwoord 7

Vanaf stuurversie 4.0,

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