¿Cómo obtener el índice en los manillares de cada ayudante?

267

Estoy usando Handlebars para crear plantillas en mi proyecto. ¿Hay alguna manera de obtener el índice de la iteración actual de un "cada" ayudante en Manillar?

<tbody>
     {{#each item}}
         <tr>
            <td><!--HOW TO GET ARRAY INDEX HERE?--></td>
            <td>{{this.key}}</td>
            <td>{{this.value}}</td>
         </tr>
     {{/each}}
</tbody>
Thunderboltz
fuente
1
Puede registrar su propio ayudante para hacer esto, por ejemplo: gist.github.com/1048968 o: pastebin.com/ksGrVYkz
stusmith
1
Agregué otra solución al ejemplo de Gist que funciona con handlebars-1.0.rc.1.js. gist.github.com/1048968#gistcomment-617934
mlienau

Respuestas:

524

En las versiones más recientes de Handlebars, el índice (o clave en el caso de la iteración de objetos) se proporciona por defecto con el estándar de cada ayudante.


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

El índice del elemento de matriz actual ha estado disponible desde hace algún tiempo a través de @index:

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

Para la iteración de objetos, use @key en su lugar:

{{#each object}}
    {{@key}}: {{this}}
{{/each}} 
ro60
fuente
57
He intentado implementar esto en varias situaciones, cada vez que aparece un error en la consola. Uncaught SyntaxError: Unexpected token ,
waltfy
1
Esto funciona bien, pero asegúrese de que el carácter '@' se escape si usa un marco web donde @ tiene un significado especial :)
AlexG
77
Vale la pena señalar que a partir de v1.2.0 , @indexy @firstahora también son compatibles con cada iteración en los objetos.
WynandB
66
Si está utilizando ASP.Net MVC Razor, escapa con @@, es decir{{@@index}}
masty
19

Esto ha cambiado en las versiones más nuevas de Ember.

Para matrices:

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

Parece que el bloque #each ya no funciona en objetos. Mi sugerencia es rodar su propia función auxiliar para ello.

Gracias a este extremo .

Ryan Lewis
fuente
14

Sé que esto es demasiado tarde. Pero resolví este problema con el siguiente código:

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 desea comenzar su índice con 1, debe hacer el siguiente código:

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

Gracias.

Naitik
fuente
1
Gracias, aclaró que @index comienza en 0 y proporcionó un método para cambiarlo a 1 índice basado. Exactamente lo que necesitaba.
Rebs
14

En la versión 3.0 del manillar en adelante,

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

En este ejemplo en particular, el usuario tendrá el mismo valor que el contexto actual y userId tendrá el valor de índice para la iteración. Consulte - http://handlebarsjs.com/block_helpers.html en la sección de ayudantes de bloque

Ember Freak
fuente
7

Matrices:

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

Si tiene matrices de objetos ... puede recorrer los elementos secundarios:

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

Objetos:

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

Si tiene objetos anidados, puede acceder al keyobjeto primario con {{@../key}}

RegarBoy
fuente
0

En la versión 4.0 del manillar en adelante,

{{#list array}}
  {{@index}} 
{{/list}}
anónimo
fuente