각 도우미에서 핸들 막대에 색인을 얻는 방법은 무엇입니까?


267

프로젝트에서 템플릿을 처리하기 위해 핸들 바를 사용하고 있습니다. 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
이를 위해 자신의 도우미를 등록 할 수 있습니다 (예 : gist.github.com/1048968 또는 : pastebin.com/ksGrVYkz
stusmith

1
handlebars-1.0.rc.1.js와 함께 작동하는 Gist 예제에 다른 솔루션을 추가했습니다. gist.github.com/1048968#gistcomment-617934
mlienau

답변:


524

최신 버전의 Handlebars 인덱스 (또는 객체 반복의 경우 키)는 기본적으로 표준 각 도우미와 함께 제공됩니다.


스 니펫 : 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 ,
waltfy

1
@가 특별한 의미를 가진 웹 프레임 워크를 사용한다면 이것은 잘 작동하지만 '@'문자가 빠져
나가도록해야

7
그것의 가치로 그 지적 V1.2.0 , @index그리고 @first지금은 너무 객체의 각 반복에 대해 지원됩니다.
WynandB

6
ASP.Net MVC Razor를 사용하는 경우 @@, 즉{{@@index}}
masty가


19

최신 버전의 Ember에서 변경되었습니다.

배열의 경우 :

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

#each 블록이 더 이상 객체에서 작동하지 않는 것 같습니다. 내 제안은 자신의 도우미 기능을 굴리는 것입니다.

팁을 주셔서 감사합니다 .


14

나는 이것이 너무 늦다는 것을 안다. 그러나 다음 코드 로이 문제를 해결했습니다.

자바 스크립트 :

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로 색인을 시작하려면 다음 코드를 수행해야합니다.

자바 스크립트 :

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


0

핸들 바 버전 4.0 이상에서는

{{#list array}}
  {{@index}} 
{{/list}}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.