Skip to content

Handlebars.js – everyOther Helper

by arlo on June 29th, 2013 

For those not familiar with Handlebars.js. It’s a small templating engine built off of Mustache.

The Helper

Handlebars v1.0.rc.1

Usage

Example: We want to “stripe” every 3 rows by adding a specific class to our <div>.


{{#each people}}
    {{#everyOther @index 3 }}
        <div class="person highlightRow">
    {{else}}
        <div class="person">
    {{/everyOther}}

            <h1>{{firstName}} {{lastName}}</h1>
            <!-- Mmre info on person -->
        </div>
{{/each}}

You can also imagine an example where you are making a <table> and you want every 20 rows to show the table columns.

Try it

I put up an example on JS Fiddle. You can edit the handlebar template and play with it yourself.

  • Елизавета Кайсарова

    Hi
    Im looking for sexy man
    my private free nude pics here http://ow.ly/pmZRu

  • Andrew

    question: how do you modify where the index starts at?

    like

    index = 0

    every other would be

    {{#everyOther @index 2}}

    Thing.

    {{/everyOther}}

    and produce

    ___

    Thing

    ___

    Thing

    but if you wanted:

    OtherThing

    Thing

    OtherThing

    Thing

    you would have to do something like:

    {{#everyOther (@index + 1) 2}}

    but that doesnt work… and I don’t know why…

  • Andrew

    in my case else worked, still curious how to define index start though.

  • tuyennguyencanada

    thank you, works well for me.