CODEWITHSUNDEEP
handlebars.jsghost-blog
T.W. Barton
T.W. Barton

Reputation: 19

Handlebars, how to evaluate the @index

I'm using Ghost as my website base which in turn uses handlebars. I purchased a template to expedite my roll out and am now trying to customize a few items.

So the home page is a masonry style layout of blog entries. The page is built with a {{#foreach posts}} loop.

What I want to do is evaluate the @index (I assume that it is available in the foreach just like the each loop) so, something like this.

{{#foreach posts}}
    if @index = 0
        DO SOMETHING
    elseif @index = 1
        DO SOMETHING
    .
    .
    so on
{{/foreach}}

Or better yet a select case would be best. The current lay out is 6 items per page and my goal is to set specific css groups on 0 & 3, 1 & 4, and 2 & 5.

Thank you, Ty

Upvotes: 2

Views: 5682

Answers (3)

shagamemnon
shagamemnon

Reputation: 79

A better (simpler) solution is just to use CSS (view on CodePen):

 <head>
    <style>
    .item {
        color: white
    }
    .item:nth-child(6n-2), p:first-child  {
        background: green;
    }
    .item:nth-child(6n-4), p:nth-child(6n-1)  {
        background: red;
    }
    .item:nth-child(6n-3), p:nth-child(6n)  {
        background: blue;
    }
    </style>
</head>

<body>
  <div class="items">
    <p class="item">Item 0</p>
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3</p>
    <p class="item">Item 4</p>
    <p class="item">Item 5</p>
    </div>
</body>

Upvotes: 0

Reedyn
Reedyn

Reputation: 321

It is possible with the {{#has}} helper combined with the data variables accessable within the {{#foreach}}-object.

When inside a {{#foreach}} block, you have access to a set of data variables about the current iteration. These are:

  • @index (number) - the 0-based index of the current iteration

  • @number (number) - the 1-based index of the current iteration

  • @key (string) - if iterating over an object, rather than an array, this > contains the object key

  • @first (boolean) - true if this is the first iteration of the collection

  • @last (boolean) - true if this is the last iteration of the collection

  • @odd (boolean) - true if the @index is odd

  • @even (boolean) - true if the @index is even

  • @rowStart (boolean) - true if columns is passed and this iteration signals a row start

  • @rowEnd (boolean) - true if columns is passed and this iteration signals a row end

Source: http://themes.ghost.org/docs/foreach

{{#has number="3"}}{{/has}} // A single number

{{#has number="3, 6, 9"}}{{/has}} // list of numbers

{{#has number="nth:3"}}{{/has}} // special syntax for nth item

{{!-- All of these work exactly the same for index --}}

Source: http://themes.ghost.org/docs/has

So if you want to access 1 & 3 you can do the following:

{{#foreach posts}}
    {{#has @index="1, 3"}}
        //DO SOMETHING
    {{/has}}
{{/foreach}}

If you're after odd/even then the @odd and @even data-variables are much simpler to use.

Upvotes: 2

T.W. Barton
T.W. Barton

Reputation: 19

So, you cannot do comparisons in handlebars. I figured out how to do it through javascript.

Upvotes: -1

Related Questions