meteor - Properly rendering closing tags in Handlebars

Question

I'm using Meteor and trying to get around the lack of the Handlebars @index. I'm getting close. I've implemented a counter, and a few helper functions:

• initCounter initializes the counter to 0
• incCounterMod increments the counter and applies the modulo to get every X number
• counterIs simply checks the counter is a particular number X

All this basically to get a three items per row on my output. Here is a sample:

  {{initCounter}}
  <div class="row-fluid">
  {{#each list}}
    <span></span>
    {{incCounterMod 3}}
    {{#if counterIs 0}}
      </div><div class="row-fluid">
    {{/if}}
  {{/each}}
  </div>

As you can see, I'm trying to end one <div> and start another. I should get output like:

<div class="row-fluid">
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="row-fluid">
  <span></span>
  <span></span>
  <span></span>
</div>
...

The problem is... Handlebars or Meteor seems to be "fixing" or "logically matching" my div blocks by reversing the </div><div class="row-fluid"> tags, so that my output is:

<div class="row-fluid">
  <span></span>
  <span></span>
  <span></span>
  <div class="row-fluid"></div>
  <span></span>
  <span></span>
  <span></span>
  <div class="row-fluid"></div>
  <span></span>
  ...
</div>

Kinda silly, since I didn't ask for that. I'm trying to end one <div> and start another, not match them up according to where they appear in the source code. (Note: console debugging suggests that all the counters and stuff are working well.)

Is there a way to get around this? I thought Handlebars just rendered html text as it goes ... I guess I may be wrong.

Thanks.

Answer 1

If your goal is simply to use three columns to arrange more items on the page, there may not really a need to have a div for each row, and you may want to consider a CSS-based approach. Here is an example of how you could output your data as li elements. The CSS sets the width of the container and each li and flows your data into the number of columns you want. One advantage of this approach is that you can make your display responsive (perhaps you only want one column when displaying on a phone or in a sidebar, or 8 columns in a printout). That would leave you with a very simple template:

<ol>
  {{#each list}}
    <li>{{value}}</li>
  {/each}
</ol> 

If for some reason you wish to stick with the divs with three spans each, the typical approach for Handlebars would be to structure your data in your template helper to output three at a time (e.g. list = [[1,2,3], [4,5,6], [7,8,9]]). The example structure can be rendered with the following code using nested {{#each}} blocks:

{{#each list}}
  <div>
    {{#each this}}
      <span>{{this}}</span>
    {{/each}}
  </div>
{{/each}}

It's interesting that Handlebars is so opinionated about how it should be used that it 'fixes' your code for you, but in most cases it works out well. The above html should be easier to read and troubleshoot. It will make your helper javascript more complex, though.