Come ottenere l'indice nel manubrio di ogni aiutante?


267

Sto usando il manubrio per il modello nel mio progetto. C'è un modo per ottenere l'indice dell'iterazione corrente di un "ogni" aiutante in Manubri?

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

1
È possibile registrare il proprio assistente per farlo, ad esempio: gist.github.com/1048968 o: pastebin.com/ksGrVYkz
stusmith

1
Ho aggiunto un'altra soluzione all'esempio Gist che funziona con handlebars-1.0.rc.1.js. gist.github.com/1048968#gistcomment-617934
mlienau

Risposte:


524

Nelle versioni più recenti dell'indice di Handlebars (o chiave nel caso di iterazione di oggetti) è fornito di default con lo standard ogni helper.


frammento da: https://github.com/wycats/handlebars.js/issues/250#issuecomment-9514811

L'indice dell'articolo array corrente è disponibile da qualche tempo tramite @index:

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

Per l'iterazione degli oggetti, utilizzare invece @key:

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

57
Ho provato a implementarlo in varie situazioni, ogni volta che ricevo un errore sulla console. Uncaught SyntaxError: Unexpected token ,
Waltfy,

1
Funziona bene, ma assicurati che il carattere '@' sia sfuggito se usi un framework web in cui @ ha un significato speciale :)
AlexG

7
Vale la pena di notare che alle v1.2.0 , @indexe @firstsono ora supportati per ogni iterazione su oggetti troppo.
WynandB,

6
Se stai usando ASP.Net MVC Razor {{@@index}}
scappi


19

Questo è cambiato nelle versioni più recenti di Ember.

Per array:

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

Sembra che il blocco #each non funzioni più sugli oggetti. Il mio suggerimento è di attivare la propria funzione di supporto.

Grazie per questo suggerimento .


14

So che è troppo tardi. Ma ho risolto questo problema con il seguente codice:

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 vuoi iniziare il tuo indice con 1 dovresti fare il seguente codice:

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

Grazie.


1
Grazie, hai chiarito che @index inizia da 0 e hai fornito un metodo per cambiarlo in 1 indice basato. Esattamente quello di cui avevo bisogno.
Rebs l'

14

A partire dalla versione 3.0 del manubrio,

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

In questo esempio particolare, l'utente avrà lo stesso valore del contesto corrente e userId avrà il valore dell'indice per l'iterazione. Fare riferimento a http://handlebarsjs.com/block_helpers.html nella sezione degli helper di blocco


7

Array:

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

Se hai matrici di oggetti ... puoi scorrere tra i bambini:

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

Oggetti:

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

Se si hanno oggetti nidificati, è possibile accedere keyall'oggetto parent con {{@../key}}


0

A partire dalla versione 4.0 del manubrio,

{{#list array}}
  {{@index}} 
{{/list}}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.