For a bootstrap carousel item <div class="item"> the first item needs to be active
div class="item active"> though only the first the item

Thought to write a Handlebars Helper, to loop through like this:

  <div class="item active">
    <div class="foo">{{foo.[0]}}</div>
  </div>
{{#each resArray foo}}
  <div class="item">
    <div class="foo">{{this}}</div>
  </div>
{{/each}}

..though how would this be written correctly?

Handlebars.registerHelper("resArray", function(array) {
  return array[1 to array.length];
});

Also, where would this helper go? ..in my node server.js file where Handlebars is assigned?

For a bootstrap carousel item <div class="item"> the first item needs to be active
div class="item active"> though only the first the item

Thought to write a Handlebars Helper, to loop through like this:

  <div class="item active">
    <div class="foo">{{foo.[0]}}</div>
  </div>
{{#each resArray foo}}
  <div class="item">
    <div class="foo">{{this}}</div>
  </div>
{{/each}}

..though how would this be written correctly?

Handlebars.registerHelper("resArray", function(array) {
  return array[1 to array.length];
});

Also, where would this helper go? ..in my node server.js file where Handlebars is assigned?

• javascript
• node.js
• twitter-bootstrap
• express
• handlebars.js

2 Answers 2

Turns out it's as easy as:

{{#each foo}}
  {{#if @first}}
    <div class="item active">
      <div class="foo">{{this}}</div>
    </div>
  {{else}}
    <div class="item">
      <div class="foo">{{this}}</div>
    </div>
  {{/if}}
{{/each}}

Use the following code:

{{#each foo}}
  <div class="item {{#if @first}}active{{/if}}">
    <div class="foo">{{this}}</div>
  </div>
{{/each}}