Using @index in meteor #each iterator doesn't work [duplicate]

Question

why doesn't this work in meteor? https://github.com/wycats/handlebars.js/issues/250

Answer 1

It's not yet implemented in meteor's version of handlebars; there's a subtlety about the reactivity of @index rendering properly. You can read more about it here: https://github.com/meteor/meteor/issues/489#issuecomment-11270564

Answer 2

This is definitely a frustration for me as well. In the meantime I made a handlebars helper to parse anything into named 'key' and 'value' objects:

Handlebars.registerHelper('key_value', function(context, options) {
  var result = [];
  _.each(context, function(value, key, list){
    result.push({key:key, value:value});
  })
  return result;
});

This would be used with the #each operator like:

<dl class="attributes">
  {{#each key_value attributes}}
    <dt>{{key}}</dt><dd>{{value}}</dd>
  {{/each}}
</dl>

Answer 3

Another way to get it to work is to use a standard Meteor template helper with the map cursor function.

Here's an example showing how to return the index when using each with a collection:

index.html:

<template name="print_collection_indices">
  {{#each items}}
    index: {{ this.index }}
  {{/each}}

index.js:

Items = new Meteor.Collection('items');

Template.print_collection_indices.items = function() {
  var items = Items.find().map(function(doc, index, cursor) {
    var i = _.extend(doc, {index: index});
    return i;
  });
  return items;
};