javascript - 在 Meteor 中使用#each 使用动态数据填充 Bootstrap 网格

Question

首先感谢您的帮助并原谅我的幼稚Meteor和Bootstrap技能。我遇到了与提出的问题类似的问题 here这产生了一些建议但没有解决方案。我想使用#each 在 Meteor 模板中使用来自 MongoDB 的数据填充 BootStrap 网格。由于 BootStrap 网格有 12 列，我想每行显示 4 个“单元格”，我相信我需要 -

1. 使用 .
创建一行
2. 在...element...中输出四个数据元素
3. 用 .
关闭“行 div”
4. 使用...创建下一行
5. 冲洗并从第 2 步开始重复。

第 2 步是使用 {{#each...}} block 从数组/集合返回数据执行的。

我的 Meteor 模板看起来像这样(我正在扩展优秀的“Discovering Meteor”一书中的示例)-

<template name="postsList"> 
<div class="posts">
   <div class='row-fluid' style="margin-left:1%">
      {{breakInit}}
      {{#each posts}}
         <div class="span3">
           {{> postItem}}
         </div>
         {{breakNow}}
      {{/each}}
   </div>
</div> 
</template>

Helpers 的 JavaScript 看起来像这样 -

Template.postsList.breakInit = function() {
Template.postsList.docCount = 0 ;
};

Template.postsList.breakNow = function() {
count=Template.postsList.docCount + 1 ;
result="";
if ( count == 4 ) {
    count = 0 ;
    Template.postsList.docCount = count ;
    result="</div><div class=row>" ;
};
Template.postsList.docCount = count ;
return new Handlebars.SafeString(result);
};

这一切似乎都有效，至少在计算 #each 输出的元素方面，返回 </div><div class=row>开始新行并重置计数器...但是...返回的 HTML 结束当前行并开始下一行似乎没有像我期望的那样由 Bootstrap(或 Meteor 或我的浏览器)处理。它似乎被重新排序为 <div class=row></div> .请参阅 FireFox 中 Inspector 的屏幕截图(代码输出 6 个元素，第一行 4 个，第二行 2 个)-

<div id="main" class="row-fluid">
  <div class="posts">
    <div class="row">
      <div class="span3"> … </div>
      <div class="span3"> … </div>
      <div class="span3"> … </div>
      <div class="span3"> … </div>
      <div class="row"> … </div>  <-- The problem...
      <div class="span3"> … </div>
      <div class="span3"> … </div>
    </div>
  </div>
</div>

注意 <div class=row>...</div>在跨度中间？看起来不对，它应该关闭前一个“行”DIV 并开始下一个。谁能建议修复我的代码或使用 Meteor 中的动态数据填充网格的替代方法？

Answer 1

您可以在数据呈现之前对其进行分组:

Template.projectList.helpers({
    projects: function () {
        all = Projects.find({}).fetch();
        chunks = [];
        size = 4;
        while (all.length > size) {
            chunks.push({ row: all.slice(0, size)});
            all = all.slice(size);
        }
        chunks.push({row: all});
        return chunks;
    }
});

<template name="projectList">
  {{#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>