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

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

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 .


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.


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


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


0

En la versión 4.0 del manillar en adelante,

{{#list array}}
  {{@index}} 
{{/list}}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.