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)

 <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 output projectItem. I want to output them so every 3 project are wrapped in a

This is my js helper

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 set it up so there are 3 projects per row, and then it knows to insert a new row div after every 3 projects? The way I have it currently setup leads to really funky results, as it is not reliable in that the new div will be inserted before the project.

Check out the results here: http://testprojectapp.meteor.com

You will see that the first row shows up ok but then I get some funky results after that. And if you check out the DOM through viewing page source you will see that the dont match my code which is weird.

Let me know if this is a confusing question. Thanks!

回答1:

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!

回答2:

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>

回答3:

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 ""

来源：https://stackoverflow.com/questions/18674346/how-do-i-populate-a-bootstrap-grid-system-using-handlebars-for-each-command-in-m