Conditionally wrap every 3 elements into the div in templates

help
1

Hi guys!

I have a small problem here.
To follow the layout i need to wrap every 3 elements into the div with “row” class.
So, this one i’ve got in my head immediately, but it’s not working (obviously)

{{#each addIndex latestProducts}}
    {{#if isNewRow index }}<div class="row">{{/if}}
      <div class="one-third column text-center"></div>
    {{#if isNewRow index }}</div>{{/if}}
{{/each}}

Yeah, i’m stupidly tried the first thing i’ve got in my head, and tried to search any solution, thats what i’ve found: https://github.com/meteor/meteor/issues/2090

There was reasonable explanation by avital why it’s not working, i’ve tried to search meteor-talk for proper solution, but no success.

Also, tried to dig a bit in block helpers documentation, but still have no idea how to handle that.

Any suggestions?

Best,
N

2

Blaze trips over the opening/closing HTML elements in conditionals (my own wording). You will have to massage the data in your addIndex helper to actually spit out an array (rows) of arrays (columns)

{{#each addIndex latestProducts}}
 <div class="row">
 {{#each column}}
  <div class="one-third column text-center"></div>
 {{/each}}
 </div>
{{/each}}
3

Exactly! after spending some more time on the problem, i’m came to the same thing:

  1. Template helper returns splitted(by rows) array like
  return [[a,b,c], [d,e,f]]
  1. In template
{{#each latestProducts}} <!-- already grouped by 3 -->
  <div class="row">
  {{#each this}}
     <div class="one-third column text-center">
        <img src="{{image.thumbnails.medium}}">
      </div>
  {{/each}}
  </div>
{{/each}}

Thank you so much for your reply! really appreciate that!