Bagaimana cara mendapatkan indeks di Setang setiap helper?


267

Saya menggunakan Setang untuk templating di proyek saya. Apakah ada cara untuk mendapatkan indeks iterasi saat ini dari pembantu "masing-masing" di Handlebars?

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

1
Anda dapat mendaftarkan pembantu Anda sendiri untuk melakukan ini, misalnya: gist.github.com/1048968 atau: pastebin.com/ksGrVYkz
stusmith

1
Saya menambahkan solusi lain ke contoh Gist yang berfungsi dengan setang-1.0.rc.1.js. gist.github.com/1048968#gistcomment-617934
mlienau

Jawaban:


524

Dalam versi terbaru dari Handlebars index (atau kunci dalam hal iterasi objek) disediakan secara default dengan standar setiap helper.


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

Indeks item array saat ini telah tersedia untuk beberapa waktu sekarang melalui @index:

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

Untuk pengulangan objek, gunakan @key sebagai gantinya:

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

57
Saya telah mencoba menerapkan ini dalam berbagai situasi, setiap kali saya mendapatkan kesalahan di konsol. Uncaught SyntaxError: Unexpected token ,
waltfy

1
Ini berfungsi dengan baik tetapi pastikan karakter '@' lolos jika Anda menggunakan kerangka kerja web di mana @ memiliki makna khusus :)
AlexG

7
Perlu dicatat bahwa pada v1.2.0 , @indexdan @firstsekarang didukung untuk setiap iterasi pada objek juga.
WynandB

6
Jika Anda menggunakan ASP.Net MVC Razor Anda melarikan diri dengan @@, yaitu{{@@index}}
masty


19

Ini telah berubah di versi Ember yang lebih baru.

Untuk array:

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

Sepertinya blok #each tidak lagi berfungsi pada objek. Saran saya adalah untuk menggulirkan fungsi pembantu Anda sendiri untuk itu.

Terima kasih atas tip ini .


14

Saya tahu ini sudah terlambat. Tetapi saya memecahkan masalah ini dengan Kode berikut:

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

jika Anda ingin memulai indeks Anda dengan 1 Anda harus melakukan kode berikut:

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

Terima kasih.


1
Terima kasih, Anda mengklarifikasi bahwa @index dimulai dari 0, dan memberikan metode untuk mengubahnya menjadi indeks berbasis 1. Apa yang saya butuhkan.
Rebs

14

Di stang versi 3.0 dan seterusnya,

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

Dalam contoh khusus ini, pengguna akan memiliki nilai yang sama dengan konteks saat ini dan userId akan memiliki nilai indeks untuk iterasi. Refer - http://handlebarsjs.com/block_helpers.html di bagian block helpers


7

Array:

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

Jika Anda memiliki array objek ... Anda dapat beralih melalui anak-anak:

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

Benda:

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

Jika Anda memiliki objek bersarang, Anda dapat mengakses keyobjek induk dengan {{@../key}}


0

Dalam versi stang 4.0 dan seterusnya,

{{#list array}}
  {{@index}} 
{{/list}}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.