วิธีรับดัชนีในแฮนด์บาร์แต่ละตัวช่วย?


267

ฉันกำลังใช้แฮนด์บาร์สำหรับทำเทมเพลตในโครงการของฉัน มีวิธีรับดัชนีการวนซ้ำปัจจุบันของผู้ช่วยเหลือ "แต่ละคน" ในแฮนด์บาร์หรือไม่?

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

1
คุณสามารถลงทะเบียนผู้ช่วยของคุณเองเพื่อทำสิ่งนี้ตัวอย่างเช่น: gist.github.com/1048968หรือ: pastebin.com/ksGrVYkz
stusmith

1
ฉันได้เพิ่มวิธีแก้ไขปัญหาอื่นลงในตัวอย่าง Gist ที่ทำงานกับ handlebars-1.0.rc.1.js gist.github.com/1048968#gistcomment-617934
mlienau

คำตอบ:


524

ในดัชนีรุ่นใหม่กว่าของดัชนีแฮนด์บาร์ (หรือคีย์ในกรณีของการทำซ้ำวัตถุ) มีให้โดยค่าเริ่มต้นพร้อมกับผู้ช่วยมาตรฐานแต่ละราย


ตัวอย่างจาก: https://github.com/wycats/handlebars.js/issues/250#issuecomment-9514811

ดัชนีของรายการอาร์เรย์ปัจจุบันสามารถใช้งานได้แล้วบางเวลาผ่านทาง @index:

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

สำหรับการวนซ้ำวัตถุให้ใช้ @key แทน:

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

57
ฉันได้ลองใช้สิ่งนี้ในสถานการณ์ต่าง ๆ ทุกครั้งที่ฉันพบข้อผิดพลาดบนคอนโซล Uncaught SyntaxError: Unexpected token ,
22413 waltfy

1
นี้ทำงานได้ดี แต่ให้แน่ใจว่า '@' ตัวละครรอดถ้าคุณใช้กรอบเว็บที่ @ มีความหมายพิเศษ :)
AlexG

7
มันเป็นมูลค่า noting ว่าเป็นของv1.2.0 , @indexและ@firstได้รับการสนับสนุนในขณะนี้สำหรับแต่ละซ้ำกับวัตถุมากเกินไป
WynandB

6
หากคุณกำลังใช้มีดโกน ASP.Net MVC คุณต้องหลบหนีด้วย @@ เช่น{{@@index}}
masty


19

สิ่งนี้มีการเปลี่ยนแปลงใน Ember รุ่นใหม่กว่า

สำหรับอาร์เรย์:

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

ดูเหมือนว่า #each block จะไม่ทำงานกับวัตถุอีกต่อไป คำแนะนำของฉันคือการหมุนฟังก์ชั่นผู้ช่วยของคุณเองสำหรับมัน

ขอบคุณสำหรับเคล็ดลับนี้


14

ฉันรู้ว่ามันสายเกินไป แต่ฉันแก้ไขปัญหานี้ด้วยรหัสต่อไปนี้:

สคริปต์ 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}}

ถ้าคุณต้องการเริ่มดัชนีของคุณด้วย 1 คุณควรทำโค้ดต่อไปนี้:

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

ขอบคุณ


1
ขอขอบคุณคุณชี้แจงว่า @index เริ่มต้นที่ 0 และให้วิธีการเปลี่ยนเป็นดัชนีที่อ้างอิง 1 สิ่งที่ฉันต้องการ
Rebs

14

ในมือจับเวอร์ชัน 3.0 ขึ้นไป

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

ในตัวอย่างนี้ผู้ใช้จะมีค่าเดียวกันกับบริบทปัจจุบันและ userId จะมีค่าดัชนีสำหรับการวนซ้ำ อ้างอิง - http://handlebarsjs.com/block_helpers.htmlในส่วนของตัวช่วยบล็อก


7

อาร์เรย์:

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

หากคุณมีอาร์เรย์ของวัตถุ ... คุณสามารถทำซ้ำผ่านลูก ๆ ได้:

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

วัตถุที่:

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

หากคุณมีวัตถุที่ซ้อนกันคุณสามารถเข้าถึงkeyวัตถุแม่ด้วย {{@../key}}


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.