How do I populate a bootstrap grid system using handlebars for each command in Meteor.js?
I am trying to display 3 projects per row. My template looks like this: (UPDATED)
{{breakTimeReset
-
You can also do that by using plain CSS. The Foundation Framework has a grid system where you need to define the columns in the grid element, not in the child elements itself and someone adapted it to be used together with bootstrap. This means you can simply add more and more elements and the grid will layout 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>讨论(0) -
UPDATE: fails because template engine is helpful, and won't let you have tags spanning templates. It balances each one out, even if you try just injecting text. Nice if you need it, I'm not a fan.
Previous:
Oh, nearpoint stuck to his guns and I was wrong! Handlebars parses each template and 'fixes' it so there are an even number of tags. Edited to reflect this.
The 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 ""讨论(0) -
You can group your data before it gets rendered:
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, nearpoint!
讨论(0)
加载中...
- 热议问题