小编And*_*ndy的帖子

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

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

  1. 使用创建一行.
  2. 在......元素中输出四个数据元素......
  3. 用'关闭'row div'.
  4. 使用...创建下一行
  5. 从步骤2中冲洗并重复.

使用从{{#each ...}}块返回数据/集合中的数据来执行步骤2.

我的流星模板看起来像这样(我从优秀的'发现流星'一书中扩展了一个例子) -

<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>
Run Code Online (Sandbox Code Playgroud)

助手的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); …
Run Code Online (Sandbox Code Playgroud)

javascript grid twitter-bootstrap meteor

6
推荐指数
1
解决办法
5798
查看次数

标签 统计

grid ×1

javascript ×1

meteor ×1

twitter-bootstrap ×1