title: Tracking even/odd index of Meteor Spacebars Collection (blaze)
body: <p>Using Meteor 0.8.x</p>
  
  <p>I'm trying to fill a template with two columns of documents in a collection. Half in one column, half in the other.  Best I could figure was to run through the collection twice, once for each side and use a index or counter to track even/odd. Spacebars doesn't have @index or @even @odd. There are multiple discussions about this in stackoverflow and ggroup but I'm not sure how to do that correctly in my own helper.</p>
  
  <p>Tried this template:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;article&gt;
          {{#each post}}
              {{#if oddCounter}}
                 {{&gt; templatePost}}
              {{/if}}
          {{/each}}
      &lt;/article&gt;
      &lt;article&gt;
         {{#each post}}
             {{#if evenCounter}}
                 {{&gt; templatePost}}
             {{/if}}
         {{/each}}
      &lt;/article&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with these helpers:</p>
  
  <pre><code>var evenPost = 0;
  var oddPost = 0;
  
  Template.dashboard.helpers({
      evenCounter: function () {
          return (evenPost++ % 2 === 0);
      },
      oddCounter: function () {
          return !(oddPost++ % 2 === 0);
      },
      posts: function () {
          return Posts.find();
      }
  });
  </code></pre>
  
  <p>For one, this seems crude, and does work initially. But it actually has a flaw where anytime a document is changed and the template is redrawn (templatePost) it iterates the oddCounter/evenCounter variables and moves the item to the other column. Not sure how to solve this.</p>
  
  <p>Is my method of counting for each post totally flawed?</p>
  
  <p>Can you refactor this to prevent Meteor from incrementing on redraw?</p>
  
  <p>Maybe use a custom .map and cursor function to add index to the collection on client? (saw this in <a href="https://www.discovermeteor.com" rel="nofollow">Discover Meteor book</a> but couldn't get it working right).</p>
  
  <p>Thanks!</p>
  
  <p>Update 1: Mr D's solution works, but I was able to get the <a href="https://www.discovermeteor.com" rel="nofollow">Discover Meteor example</a> from Animations chapter working and stuck with it.</p>
  
  <pre><code>Template.dashboard.helpers({
      posts: function () {
          var index = 0;
          var posts = Posts.find();
          return posts.map(function(post, index, cursor) {
              post._index = index++;
              return post;
          });
      },
      even: function () {
          return (this._index % 2) === 0;
      }
  });
  </code></pre>
  
  <p>Update 2: For a few less lines of code, remove the odd counter and use <code>{{#unless even}}</code> in your template to track odd documents.</p>