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

JAVASCRIPT / 글쓴이

프로젝트에서 템플릿을 처리하기 위해 핸들 바를 사용하고 있습니다. Handlebars에서 “각”헬퍼의 현재 반복 색인을 얻는 방법이 있습니까?

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

답변

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

스 니펫 : https://github.com/wycats/handlebars.js/issues/250#issuecomment-9514811

현재 배열 항목의 인덱스는 @index를 통해 얼마 동안 사용할 수 있습니다.

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

객체 반복의 경우 @key를 대신 사용하십시오.

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

답변

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

배열의 경우 :

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

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

이 팁을 주셔서 감사합니다 .

답변

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

자바 스크립트 :

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

감사.

답변

핸들 바 버전 3.0 이상에서는

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

이 특정 예제에서 사용자는 현재 컨텍스트와 동일한 값을 가지며 userId는 반복에 대한 색인 값을 갖습니다. 블록 도우미 섹션의 http://handlebarsjs.com/block_helpers.html 을 참조하십시오 .

답변

배열 :

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

답변

핸들 바 버전 4.0 이상에서는

{{#list array}}
  {{@index}} 
{{/list}}

답변