Wie bekomme ich einen Index im Lenker für jeden Helfer?

267

Ich verwende Lenker für Vorlagen in meinem Projekt. Gibt es eine Möglichkeit, den Index der aktuellen Iteration eines "jeden" Helfers im Lenker abzurufen?

<tbody>
     {{#each item}}
         <tr>
            <td><!--HOW TO GET ARRAY INDEX HERE?--></td>
            <td>{{this.key}}</td>
            <td>{{this.value}}</td>
         </tr>
     {{/each}}
</tbody>
Thunderboltz
quelle
1
: Sie können Ihre eigenen Helfer , dies zu tun, zum Beispiel registrieren gist.github.com/1048968 : oder pastebin.com/ksGrVYkz
stusmith
1
Ich habe dem Gist-Beispiel eine weitere Lösung hinzugefügt, die mit dem Lenker-1.0.rc.1.js funktioniert. gist.github.com/1048968#gistcomment-617934
mlienau

Antworten:

524

In den neueren Versionen von Handlebars wird der Index (oder der Schlüssel bei Objektiteration) standardmäßig mit dem Standard für jeden Helfer bereitgestellt.


Ausschnitt aus: https://github.com/wycats/handlebars.js/issues/250#issuecomment-9514811

Der Index des aktuellen Array-Elements ist seit einiger Zeit über @index verfügbar:

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

Verwenden Sie für die Objektiteration stattdessen @key:

{{#each object}}
    {{@key}}: {{this}}
{{/each}} 
ro60
quelle
57
Ich habe versucht, dies in verschiedenen Situationen zu implementieren, jedes Mal, wenn ich einen Fehler auf der Konsole erhalte. Uncaught SyntaxError: Unexpected token ,
Waltfy
1
Dies funktioniert gut, aber stellen Sie sicher, dass das Zeichen '@'
maskiert
7
Es ist erwähnenswert, dass dies ab Version 1.2.0 der Fall ist @indexund @firstjetzt auch für jede Iteration von Objekten unterstützt wird.
WynandB
6
Wenn Sie ASP.Net MVC Razor verwenden, entkommen Sie mit @@, dh{{@@index}}
masty
19

Dies hat sich in den neueren Versionen von Ember geändert.

Für Arrays:

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

Es sieht so aus, als ob der Block #each bei Objekten nicht mehr funktioniert. Mein Vorschlag ist, Ihre eigene Hilfsfunktion dafür zu rollen.

Danke für diesen Tipp .

Ryan Lewis
quelle
14

Ich weiß, das ist zu spät. Aber ich habe dieses Problem mit folgendem Code gelöst:

Java Script:

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

Wenn Sie Ihren Index mit 1 beginnen möchten, sollten Sie folgenden Code ausführen:

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

Vielen Dank.

Naitik
quelle
1
Vielen Dank, Sie haben klargestellt, dass @index bei 0 beginnt, und eine Methode bereitgestellt, um es in einen 1-basierten Index zu ändern. Genau das, was ich brauchte.
Rebs
14

Ab Lenkerversion 3.0

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

In diesem speziellen Beispiel hat der Benutzer denselben Wert wie der aktuelle Kontext und die Benutzer-ID den Indexwert für die Iteration. Weitere Informationen finden Sie unter http://handlebarsjs.com/block_helpers.html im Abschnitt Blockhelfer

Ember Freak
quelle
7

Arrays:

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

Wenn Sie Arrays von Objekten haben ... können Sie die untergeordneten Elemente durchlaufen:

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

Objekte:

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

Wenn Sie verschachtelte Objekte haben, können Sie mit auf das keyübergeordnete Objekt zugreifen{{@../key}}

RegarBoy
quelle
0

Ab Lenkerversion 4.0

{{#list array}}
  {{@index}} 
{{/list}}
anonym
quelle