How to fill the boot grid using rudders for each team in Meteor.js?

Question

I am trying to display 3 projects in a row. My template looks like this: (UPDATED)

<template name="projectList"> {{breakTimeReset}} <div class=row> {{#each projects}} {{> projectItem}} {{#if breakTime}} </div> <div class=row> {{/if}} {{/each}} </div> </template> 

As you can see, for each project in the database I issue projectItem. I want to output them so that every 3 projects are wrapped in

This is my assistant js

 Template.projectList.helpers({ projects: function() { return Projects.find(); }, breakTimeReset: function() { Template.projectList.doCount = 0; }, breakTime: function () { count = Template.projectList.doCount + 1; console.log(count); Template.projectList.doCount = count; if (count % 3 == 0) { console.log("Started break"); return true; } else return false; } }); 

My question is, how can I configure it to have 3 projects per row, and then it knows how to insert a new div div after every 3 projects? The way that I have at present leads to really funky results, since it is not reliable in that a new div will be inserted before the project.

See the results here: http://testprojectapp.meteor.com

You will see that the first line is displayed normally, but after that I get some interesting results. And if you check the DOM through pageview, you will see that this does not match my code, which is strange.

Let me know if this is a confusing question. Thank you

Answer 1

You can group your data before it is visualized:

 Template.projectList.helpers({ projects: function () { all = Projects.find({}).fetch(); chunks = []; size = 3 while (all.length > 3) { chunks.push({ row: all.slice(0, 3)}); all = all.slice(3); } chunks.push({row: all}); return chunks; }, breakTimeReset: function () { Template.projectList.doCount = 0; }, breakTime: function () { count = Template.projectList.doCount + 1; console.log(count); Template.projectList.doCount = count; if (count % 3 == 0) return "</div><!-- why? --><div class='row'>" else return "" } }); <template name="projectList"> {{breakTimeReset}} {{#each projects}} {{> projectRow }} {{/each}} </template> <template name='projectRow'> <div class='row span12'> {{#each row }} {{> projectItem}} {{/each}} </div> </template> <template name="projectItem"> <div class="span4"> <h3><a href="{{projectPagePath this}}"> {{title}} </a></h3> <p> {{subtitle}} </p> <p> {{description}} </p> <p><img src="{{image}}"/></p> <p> {{openPositions}} </p> </div> </template> 

Sorry, I missed so many times, the closest point!

Answer 2

You can also do this using simple CSS. The Foundation Framework has a grid in which you need to define the columns in the grid element, not in the child elements themselves, and someone adapted it for use with bootstrap. This means that you can just add more and more elements and the grid will compose them.

https://github.com/JohnnyTheTank/bootstrap-block-grid

 <div class="block-grid-xs-2 block-grid-sm-3 block-grid-md-4"> <div> Content 1 </div> <div> Content 2 </div> <div> Content 3 </div> <div> Content 4 </div> <div> Content 5 </div> <div> Content 6 </div> </div> 

Answer 3

UPDATE: Crashing because the template engine is useful and will not allow you to create tags that span templates. It balances each of them, even if you are trying to just enter text. It's nice if you need it, I'm not a fan.

Previous:

Oh, the middle point stuck to his guns, and I was wrong! Handlebars analyzes each template and "fixes" it, so there is an even number of tags. Edited to reflect this.

Template

 <template name='sureties'> {{breakTimeReset}} {{#each allSureties }} {{name}} {{{breakTime}}} {{/each}} </template> 

Some helper functions

 Template.sureties.breakTimeReset = -> Template.sureties.docCount = 0 '' Template.sureties.breakTime = -> count = Template.sureties.docCount + 1 or 0 console.log count Template.sureties.docCount = count if count % 3 is 0 return "</div><div class=""> else return ""