title: How Create An Iterator for a Twitter Bootstrap Carousel in an Ember.js Template
body: <p>I am using Ember.js to generate a <a href="http://twitter.github.io/bootstrap/javascript.html#carousel" rel="nofollow">Twitter Bootstrap Carousel</a>. I am iterating over an <code>ArrayController</code>, but I have run into a problem: the Carousel requires a <code>data-slide-to</code> for each item that is iterated from 0 upwards (0, 1, 2, etc.). How can I easily create this with Ember?</p>
  
  <p>Another, follow-up question: how can I set the class of ONLY the first item of iteration to <code>active</code> with Ember?</p>
  
  <p>(my controller is in the default format, so it is generated)</p>
  
  <p><strong>Relevant Template:</strong></p>
  
  <pre><code>&lt;script type="text/x-handlebars" id="featured"&gt;
      &lt;div class="span8"&gt;
        &lt;div id="featured" class="carousel slide"&gt;
          &lt;ol class="carousel-indicators"&gt;
            {{#each article in controller}}
              &lt;li data-target="#featured" data-slide-to="0" class="active"&gt;&lt;/li&gt;
            {{/each}}
          &lt;/ol&gt;
          &lt;div class="carousel-inner"&gt;
            {{#each controller}}
              &lt;div class="active item"&gt;
                &lt;div class="cover-photo"&gt;
                {{renderPhoto coverPhoto.url}}
                &lt;/div&gt;
                &lt;div class="carousel-caption"&gt;
                  &lt;h4&gt;{{title}}&lt;/h4&gt;
                  &lt;p&gt;derp derp durr hurr durr&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            {{/each}}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/script&gt;
  </code></pre>