Jak uzyskać indeks w kierownicy każdego pomocnika?

267

Używam kierownic do szablonów w moim projekcie. Czy istnieje sposób na uzyskanie indeksu bieżącej iteracji „każdego” pomocnika w kierownicy?

<tbody>
     {{#each item}}
         <tr>
            <td><!--HOW TO GET ARRAY INDEX HERE?--></td>
            <td>{{this.key}}</td>
            <td>{{this.value}}</td>
         </tr>
     {{/each}}
</tbody>
piorun
źródło
1
Możesz zarejestrować własnego pomocnika, aby to zrobić, na przykład: gist.github.com/1048968 lub: pastebin.com/ksGrVYkz
stusmith
1
Dodałem inne rozwiązanie do przykładu Gist, który działa z handlebars-1.0.rc.1.js. gist.github.com/1048968#gistcomment-617934
mlienau

Odpowiedzi:

524

W nowszych wersjach indeks kierownicy (lub klucz w przypadku iteracji obiektu) jest domyślnie dostarczany ze standardowym każdym pomocnikiem.


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

Indeks bieżącego elementu tablicy jest dostępny od pewnego czasu za pośrednictwem @index:

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

Do iteracji obiektu użyj @key zamiast:

{{#each object}}
    {{@key}}: {{this}}
{{/each}} 
ro60
źródło
57
Próbowałem to zaimplementować w różnych sytuacjach, za każdym razem, gdy pojawia się błąd na konsoli. Uncaught SyntaxError: Unexpected token ,
waltfy,
1
Działa to dobrze, ale upewnij się, że znak „@” jest unikany, jeśli używasz frameworka, w którym @ ma specjalne znaczenie :)
AlexG
7
Warto zauważyć, że od v1.2.0 , @indexi @firstsą teraz obsługiwane w każdej iteracji na obiektach zbyt.
WynandB
6
Jeśli używasz ASP.Net MVC Razor, {{@@index}}
uciekasz za
19

Zmieniło się to w nowszych wersjach Embera.

W przypadku tablic:

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

Wygląda na to, że blok #each nie działa już na obiektach. Moją sugestią jest stworzenie dla niej własnej funkcji pomocnika.

Dzięki za tę wskazówkę .

Ryan Lewis
źródło
14

Wiem, że jest za późno. Ale rozwiązałem ten problem za pomocą następującego kodu:

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

jeśli chcesz rozpocząć indeks od 1, powinieneś wykonać następujący kod:

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

Dzięki.

Naitik
źródło
1
Dzięki, wyjaśniłeś, że @index zaczyna się od 0, i podałeś metodę zmiany go na indeks oparty na 1. Dokładnie to, czego potrzebowałem.
Rebs
14

Od wersji 3.0 kierownicy,

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

W tym konkretnym przykładzie użytkownik będzie miał tę samą wartość, co bieżący kontekst, a użytkownik będzie miał wartość indeksu dla iteracji. Patrz - http://handlebarsjs.com/block_helpers.html w sekcji pomocników bloku

Ember Freak
źródło
7

Tablice:

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

Jeśli masz tablice obiektów ... możesz iterować przez dzieci:

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

Obiekty:

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

Jeśli masz zagnieżdżone obiekty, możesz uzyskać dostęp do keyobiektu nadrzędnego za pomocą {{@../key}}

RegarBoy
źródło
0

W wersji 4.0 kierownicy,

{{#list array}}
  {{@index}} 
{{/list}}
anonimowy
źródło