Meteor 1.3 - Group elements in div's 3 at a time

Question

I'm using Meteor 1.3 and I am trying to create a template where I load documents from a collection, and create a div for each of them. I want them to be grouped in lines of three because I am using bootstrap's row class.

I tried opening a div every time the index is modulo 3, then putting the content, then closing the div. However, Meteor can't have unclosed tags inside {{#if}}. What is the workaround to achieve what I want? My code shows the logic I want to apply (and apparently it would work before Meteor 0.8.0).

<template name="OrganizationsTpl">

    <div class="row">

    {{#each organizations}}

        {{#if modulo3 @index}} <!-- modulo3 is a  helper I defined -->
            {{#if @index}}     <!-- If index !=0 -->
    </div>
    <div class="row">
            {{/if}}
        {{/if}}

        <div class="col-lg-4">
            <h1>{{name}}</h1>
        </div>

    {{/each}}

    </div>

</template>

Answer 1

You could presumably split your organizations list into an organizationsArray[][] (or an object) where the right side of the array contains three organizations.

[0][organization0, organization1, organization2]
[1][anotherorganization, andanother, yetanother]

And do something like this

{{#each organizationsArray}}
    <div class="row">
        {{#each organizations}}
            <div class="col-lg-4">
                <h1>{{name}}</h1>
            </div>
        {{/each}}
    </div>
{{/each}}

This isn't a working solution, but you get the picture