Comment obtenir l'index dans le guidon de chaque assistant?


267

J'utilise des guidons pour créer des modèles dans mon projet. Existe-t-il un moyen d'obtenir l'index de l'itération actuelle d'un "chaque" assistant dans le guidon?

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

1
Vous pouvez enregistrer votre propre assistant pour ce faire, par exemple: gist.github.com/1048968 ou: pastebin.com/ksGrVYkz
stusmith

1
J'ai ajouté une autre solution à l'exemple de Gist qui fonctionne avec le guidon-1.0.rc.1.js. gist.github.com/1048968#gistcomment-617934
mlienau

Réponses:


524

Dans les versions plus récentes du guidon, l'index (ou la clé dans le cas d'une itération d'objet) est fourni par défaut avec le standard de chaque assistant.


extrait de: https://github.com/wycats/handlebars.js/issues/250#issuecomment-9514811

L'index de l'élément de tableau actuel est disponible depuis un certain temps maintenant via @index:

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

Pour l'itération d'objet, utilisez @key à la place:

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

57
J'ai essayé de l'implémenter dans diverses situations, chaque fois que j'obtiens une erreur sur la console. Uncaught SyntaxError: Unexpected token ,
waltfy

1
Cela fonctionne bien mais assurez-vous que le caractère '@' est échappé si vous utilisez un framework web où @ a une signification particulière :)
AlexG

7
Il convient de noter que depuis la version 1.2.0 , @indexet @firstsont désormais pris en charge pour chaque itération sur les objets également.
WynandB

6
Si vous utilisez ASP.Net MVC Razor, vous vous échappez avec @@, c'est{{@@index}}
masty


19

Cela a changé dans les nouvelles versions d'Ember.

Pour les tableaux:

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

Il semble que le bloc #each ne fonctionne plus sur les objets. Ma suggestion est de lancer votre propre fonction d'aide pour cela.

Merci pour cette astuce .


14

Je sais que c'est trop tard. Mais j'ai résolu ce problème avec le code suivant:

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:

{{#eachData items}}
 {{index}} // You got here start with 0 index
{{/eachData}}

si vous voulez démarrer votre index avec 1, vous devez faire le code suivant:

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

Merci.


1
Merci, vous avez précisé que @index commence à 0 et avez fourni une méthode pour le changer en index basé sur 1. Exactement ce dont j'avais besoin.
Rebs

14

À partir de la version 3.0 du guidon,

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

Dans cet exemple particulier, user aura la même valeur que le contexte actuel et userId aura la valeur d'index pour l'itération. Reportez-vous - http://handlebarsjs.com/block_helpers.html dans la section des aides de bloc


7

Tableaux:

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

Si vous avez des tableaux d'objets ... vous pouvez parcourir les enfants:

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

Objets:

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

Si vous avez des objets imbriqués, vous pouvez accéder à l' keyobjet parent avec {{@../key}}


0

À partir de la version 4.0 du guidon,

{{#list array}}
  {{@index}} 
{{/list}}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.