Как получить индекс в руле каждого помощника?


267

Я использую Handlebars для шаблонов в своем проекте. Есть ли способ получить индекс текущей итерации «каждого» помощника в 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
Я добавил другое решение в пример Gist, который работает с handlebars-1.0.rc.1.js. 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 ,
Уолффи

1
Это работает нормально, но убедитесь, что символ '@' экранирован, если вы используете веб-фреймворк, где @ имеет особое значение :)
AlexG

7
Стоит отметить, что начиная с v1.2.0 , @indexи @firstтеперь поддерживаются также для каждой итерации объектов.
WynandB

6
Если вы используете ASP.Net MVC Razor, вы {{@@index}}
убегаете


19

Это изменилось в более новых версиях Ember.

Для массивов:

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

Похоже, блок #each больше не работает с объектами. Мое предложение состоит в том, чтобы накатить свою собственную вспомогательную функцию для этого.

Спасибо за этот совет .


14

Я знаю, что это слишком поздно. Но я решил эту проблему с помощью следующего кода:

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

если вы хотите начать свой индекс с 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 индекс. Именно то, что мне было нужно.
Ребс

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.