Como obter o índice no guidão de cada ajudante?

267

Estou usando o guidão para modelar no meu projeto. Existe uma maneira de obter o índice da iteração atual de um "cada" auxiliar no Guiador?

<tbody>
     {{#each item}}
         <tr>
            <td><!--HOW TO GET ARRAY INDEX HERE?--></td>
            <td>{{this.key}}</td>
            <td>{{this.value}}</td>
         </tr>
     {{/each}}
</tbody>
thunderboltz
fonte
1
Você pode registrar seu próprio ajudante para fazer isso, por exemplo: gist.github.com/1048968 ou: pastebin.com/ksGrVYkz
stusmith
1
Adicionei outra solução ao exemplo Gist que funciona com o guiador-1.0.rc.1.js. gist.github.com/1048968#gistcomment-617934
mlienau

Respostas:

524

Nas versões mais recentes do guiador, o índice (ou a chave no caso de iteração de objeto) é fornecido por padrão com o padrão cada auxiliar.


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

O índice do item atual da matriz já está disponível há algum tempo via @index:

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

Para iteração de objeto, use @key:

{{#each object}}
    {{@key}}: {{this}}
{{/each}} 
ro60
fonte
57
Eu tentei implementar isso em várias situações, sempre que recebo um erro no console. Uncaught SyntaxError: Unexpected token ,
21313 waltfy
1
Isso funciona bem, mas certifique-se o carácter '@' é escapado se você usar um framework web, onde @ tem um significado especial :)
AlexG
7
Vale a pena notar isso a partir da v1.2.0 , @indexe @firstagora também são suportados para cada iteração nos objetos.
WynandB
6
Se você estiver usando ASP.Net MVC Navalha você escapar com @@, ou seja{{@@index}}
Masty
19

Isso mudou nas versões mais recentes do Ember.

Para matrizes:

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

Parece que o bloco #each não funciona mais em objetos. Minha sugestão é rolar sua própria função auxiliar para ela.

Obrigado por esta dica .

Ryan Lewis
fonte
14

Eu sei que é tarde demais. Mas resolvi esse problema com o seguinte 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}}

se você deseja iniciar seu índice com 1, faça o seguinte 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}}

Obrigado.

Naitik
fonte
1
Obrigado, você esclareceu que @index começa em 0 e forneceu um método para alterá-lo para 1 índice baseado. Exatamente o que eu precisava.
Rebs #
14

No guiador versão 3.0 em diante,

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

Neste exemplo em particular, o usuário terá o mesmo valor que o contexto atual e o userId terá o valor do índice para a iteração. Consulte - http://handlebarsjs.com/block_helpers.html na seção auxiliares de bloco

Ember Freak
fonte
7

Matrizes:

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

Se você tiver matrizes de objetos ... poderá percorrer os filhos:

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

Se você tiver objetos aninhados, poderá acessar o keyobjeto pai com {{@../key}}

RegarBoy
fonte
0

No guiador versão 4.0 em diante,

{{#list array}}
  {{@index}} 
{{/list}}
anônimo
fonte