Як отримати індекс у ручках кожного помічника?


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, яке працює з ручкою-1.0.rc.1.js. gist.github.com/1048968#gistcomment-617934
mlienau

Відповіді:


524

У новіших версіях Індекс рулі (або ключ у випадку ітерації об'єкта) надається за замовчуванням стандартним кожним помічником.


фрагмент від: https://github.com/wycats/handlebars.js/isissue/250#issuecomment-9514811

Індекс поточного елемента масиву вже деякий час доступний через @index:

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

Для ітерації об'єкта використовуйте @key замість:

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

57
Я намагався реалізувати це в різних ситуаціях, кожен раз, коли я отримую помилку на консолі. Uncaught SyntaxError: Unexpected token ,
waltfy

1
Це добре працює, але переконайтеся, що символ "@" уникнути, якщо ви використовуєте веб-фреймворк, де @ має особливе значення :)
AlexG

7
Варто зазначити, що з версії 1.2 , @indexі @firstтепер вони підтримуються для кожної ітерації на об'єктах.
WynandB

6
Якщо ви користуєтесь ASP.Net MVC Razor, ви втечете з @@, тобто{{@@index}}
masty


19

Це змінилося в нових версіях Ember.

Для масивів:

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

Схоже, блок #each більше не працює на об’єктах. Моя пропозиція - передати свою власну функцію помічника для цього.

Дякую за цю пораду .


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 індекс. Саме те, що мені було потрібно.
Ребс

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.