Her bir yardımcı Gidon endeksi nasıl alınır?


267

Projemde templaj yapmak için Gidon kullanıyorum. Gidonlarda bir "her" yardımcısının mevcut yinelemesinin dizinini almanın bir yolu var mı?

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

1
Bunu yapmak için kendi yardımcınızı kaydedebilirsiniz, örneğin: gist.github.com/1048968 veya: pastebin.com/ksGrVYkz
stusmith 9:12

1
Gist örneğine gidon-1.0.rc.1.js ile çalışan başka bir çözüm ekledim. gist.github.com/1048968#gistcomment-617934
mlienau

Yanıtlar:


524

Gidon endeksinin daha yeni sürümlerinde (veya nesne yinelemesi durumunda anahtar) varsayılan olarak her bir yardımcı ile birlikte sağlanır.


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

Geçerli dizi öğesinin dizini bir süredir @index aracılığıyla kullanılabilir:

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

Nesne yinelemesi için bunun yerine @ anahtarını kullanın:

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

57
Bunu çeşitli durumlarda uygulamaya çalıştım, her seferinde konsolda bir hata alıyorum. Uncaught SyntaxError: Unexpected token ,
waltfy

1
Bu iyi çalışıyor ancak @ özel bir anlamı olan bir web çerçevesi kullanıyorsanız '@' karakterinin kaçtığından emin olun :)
AlexG

7
It yetmeyecek itibariyle belirterek v1.2.0 , @indexve @firstşimdi de nesneler üzerinde her yineleme için desteklenir.
WynandB

6
ASP.Net MVC Razor kullanıyorsanız @@ ile {{@@index}}
kaçıyorsunuz


19

Bu, Ember'in yeni sürümlerinde değişti.

Diziler için:

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

#Each bloğu artık nesneler üzerinde çalışmıyor gibi görünüyor. Benim önerim, bunun için kendi yardımcı işlevinizi yuvarlamaktır.

Bu ipucu için teşekkürler .


14

Bunun çok geç olduğunu biliyorum. Ancak bu kodu aşağıdaki Kod ile çözdüm:

Java Komut Dosyası:

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

endeksinizi 1 ile başlatmak istiyorsanız aşağıdaki kodu yapmanız gerekir:

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

Teşekkürler.


1
Teşekkürler, @dizin 0'dan başladığını açıklığa kavuştunuz ve 1 tabanlı dizine değiştirmek için bir yöntem sağladınız. Tam olarak ihtiyacım olan şey.
Rebs

14

Gidon 3.0 sürümünden itibaren,

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

Bu özel örnekte, kullanıcı geçerli bağlamla aynı değere sahip olacak ve userId yineleme için dizin değerine sahip olacaktır. Bakın - http://handlebarsjs.com/block_helpers.html blok yardımcıları bölümünde


7

Diziler:

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

Nesne dizileriniz varsa ... çocuklar arasında yineleme yapabilirsiniz:

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

Nesneler:

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

İç içe nesneleriniz varsa key, üst nesneye {{@../key}}


0

Gidon 4.0 sürümünden itibaren,

{{#list array}}
  {{@index}} 
{{/list}}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.