Pushing an html tag in Handlebarsjs at a given iteration within an each loop

Question

My channel.json has 7 objects of information which get iterated in hb, I want to push a date in between them. In other words how can I push an html tag to display after the 3rd iteration, in between the loop using handlebars? Ultimately I want to push inside a loop. I want to accomplish this with out modifying the .json data.

I have the following code in my index.handlebars.

 <div class="container">
      <h5>{{msg}}</h5>
      {{#each channelData}}
      <div class="card-panel grey lighten-5 z-depth-1">
        <div class="row valign-wrapper">
          <div class="col s1">
            <img alt="" class="circle responsive-img align" src="{{subjectPhotoUrl}}">
          </div>
          <div class="col s5">
            <div>
              <h5 class="title">{{title}}</h5>
              <br/>
              <p class="description">{{description}}</p>
            </div>
          </div>
          <div class="col s3">
            <div class="align">
              <img alt="" class="circle responsive-img" src=
              "{{instructorPhotoUrl}}"> <span class="instructor">{{instructorName}}</span>
            </div>
           </div> {{/each}}

The following code is in my app.js file.

   var channel  = require("./data/channel.json");
    app.get('/', function(req, res) {
        res.render('index', {
        msg:new Date(),
        channelData: channel
      });
    });

I would also like to know if it is possible to manipulate the elements to have 2 of the 7 containers close together with 0 margin and a background of red? Meaning to manipulate the css for only two containers independently one of which has not been created yet and still iterate through them.

Also how would I be able to get the {{msg}} to display inside the loop, currently if I add the {{msg}} tag in place of {{title}} tag nothing displays, however it does display on the outside above the loop.

Answer 1

You can leverage the fact that within a loop @index refers to the current index, and define a custom block helper to conditionally render your markup depending on its value.

Of course, although you can do this with handlebars, this goes against its philosophy, and it would be more idiomatic to put any logic in the function formatting the data you pass to the template.

The helper could look like :

Handlebars.registerHelper('nthIteration', function(index, i, options) {
    if (index === i) {
        return options.fn(this);
    }
    return options.inverse(this);
});

And you would use it like this :

{{#each channelData}}
    <!-- my regular markup -->
    <div class="card-panel grey lighten-5 z-depth-1">
    </div>
    {{#nthIteration @index 2}}
        <!-- markup to insert after third iteration -->
        {{ ../msg }}
    {{/nthIteration}}
{{/each}}

I'm not so clear about what you exactly want in your second question, but you can probably adapt the nthIteration block helper to your needs.