Làm thế nào để có được chỉ số trong Tay cầm mỗi người trợ giúp?


267

Tôi đang sử dụng Tay cầm để tạo khuôn mẫu trong dự án của mình. Có cách nào để lấy chỉ số của lần lặp hiện tại của một trình trợ giúp "mỗi" trong Tay cầm không?

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

1
Bạn có thể đăng ký người trợ giúp của riêng mình để thực hiện việc này, ví dụ: gist.github.com/1036168 hoặc: pastebin.com/ksGrVYkz
stusmith

1
Tôi đã thêm một giải pháp khác vào ví dụ Gist hoạt động với các tay cầm - 1.0.rc.1.js. gist.github.com/1036168#gistcomment-617934
mlienau

Câu trả lời:


524

Trong các phiên bản mới hơn của chỉ mục Tay cầm (hoặc khóa trong trường hợp lặp đối tượng) được cung cấp theo mặc định với mỗi trình trợ giúp tiêu chuẩn.


đoạn trích từ: https://github.com/wycats/handlebars.js/issues/250#issuecomment-9514811

Chỉ mục của mục mảng hiện tại đã có sẵn một thời gian qua @index:

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

Đối với lần lặp đối tượng, sử dụng @key thay thế:

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

57
Tôi đã cố gắng thực hiện điều này trong các tình huống khác nhau, mỗi lần tôi gặp lỗi trên bảng điều khiển. Uncaught SyntaxError: Unexpected token ,
ví von

1
Điều này hoạt động tốt nhưng đảm bảo ký tự '@' được thoát nếu bạn sử dụng khung web trong đó @ có ý nghĩa đặc biệt :)
AlexG

7
Nó đáng chú ý là tính v1.2.0 , @index@firsthiện đang hỗ trợ cho mỗi lần lặp trên các đối tượng quá.
WynandB

6
Nếu bạn đang sử dụng ASP.Net MVC Razor, bạn thoát bằng @@, tức là{{@@index}}
masty


19

Điều này đã thay đổi trong các phiên bản mới hơn của Ember.

Đối với mảng:

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

Có vẻ như khối #each không còn hoạt động trên các đối tượng. Đề nghị của tôi là cuộn chức năng trợ giúp của riêng bạn cho nó.

Cảm ơn vì lời khuyên này .


14

Tôi biết điều này là quá muộn. Nhưng tôi đã giải quyết vấn đề này bằng Mã sau:

Tập lệnh 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}}

Nếu bạn muốn bắt đầu chỉ mục của mình bằng 1, bạn nên thực hiện đoạn mã sau:

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

Cảm ơn.


1
Cảm ơn, bạn đã làm rõ rằng @index bắt đầu từ 0 và cung cấp một phương pháp để thay đổi nó thành 1 chỉ mục dựa trên. Chính xác những gì tôi cần.
Hoàn trả

14

Trong phiên bản tay cầm 3.0 trở đi,

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

Trong ví dụ cụ thể này, người dùng sẽ có cùng giá trị với bối cảnh hiện tại và userId sẽ có giá trị chỉ mục cho lần lặp. Tham khảo - http://handlebarsjs.com/block_helpers.html trong phần trợ giúp khối


7

Mảng:

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

Nếu bạn có mảng các đối tượng ... bạn có thể lặp qua các con:

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

Các đối tượng:

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

Nếu bạn có các đối tượng lồng nhau, bạn có thể truy cập keyđối tượng cha với {{@../key}}


0

Trong phiên bản tay cầm 4.0 trở đi,

{{#list array}}
  {{@index}} 
{{/list}}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.