在流星中使用#each填充动态数据的Bootstrap网格 [英] Populating Bootstrap grid with dynamic data using #each in Meteor

问题描述

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

1. 创建一个使用行。
   
2. 在...元素内输出四个数据元素...


3. 用$关闭'row div'。
   
4. 使用...创建下一行...


5. 冲洗并从步骤2开始重复。

我的流星模板看起来像这样（I '扩展一个例子，从优秀的'发现流星'书） -

 < 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; 
返回新的Handlebars.SafeString（结果）; 
}; 
  

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

 < ; div id =mainclass =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> <  - 问题... 
< div class =span3> ...< / div> 
< div class =span3> ...< / div> 
< / div> 
< / div> 
< / div> 
  

注意< div class = row> ...< / div> 在跨度中间？看起来不正确，它应该关闭以前的'行'DIV并开始下一个。任何人都可以建议我的代码修复或使用流星中的动态数据来填充网格的替代方法吗？

解决方案

  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> 
  

Firstly thanks for your help and forgive my infant Meteor and Bootstrap skills. I am having a similar problem to the question raised here that has generate some suggestions but no solution. I want to populate a BootStrap grid using data from MongoDB in a Meteor template using #each. Since the BootStrap grid has 12 columns and I want to display 4 'cells' per row I believe I need to -

1. Create a row using .
2. Output four data elements inside ...element...
3. Close the 'row div' with .
4. Create the next row using ...
5. Rinse and repeat from Step 2.

Step 2 is performed using a {{#each...}} block returning data from an array/collection.

My Meteor Template looks like this (I'm extending an example from the excellent 'Discovering Meteor' book) -

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

The JavaScript for the Helpers look like this -

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);
};

This all appears to work, at least in terms of counting the elements output by the #each, returning the </div><div class=row> to start a new row and resetting the counter... However... the returned HTML to end the current row and start the next does not appear to be handled by Bootstrap (or Meteor or my browser) as I expect it to. It appears to be re-ordered as <div class=row></div>. See this screen-cap from Inspector in FireFox (code outputs 6 elements, 4 in first row, 2 in second) -

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

Notice the <div class=row>...</div> in the middle of the spans? Doesn't look right, it should be closing the previous 'row' DIV and starting the next one. Can anyone suggest either a fix for my code or an alternative method for popluating a grid using dynamic data in Meteor?

解决方案

You can group your data before it gets rendered:

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>

这篇关于在流星中使用#each填充动态数据的Bootstrap网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！