Заполнение сетки Bootstrap динамическими данными с помощью #each в Meteor

Во-первых, спасибо за вашу помощь и простите мои детские навыки Meteor и Bootstrap. У меня проблема, аналогичная поднятому вопросуВот это породило некоторые предложения, но не нашло решения. Я хочу заполнить сетку BootStrap, используя данные из MongoDB в шаблоне Meteor, используя #each. Поскольку сетка BootStrap имеет 12 столбцов, и я хочу отображать 4 «ячейки» на строку, я считаю, что мне нужно -

Создать строку с помощью.Выведите четыре элемента данных внутри ... element ...Закройте 'row div' с помощью.Создайте следующую строку, используя ...Промойте и повторите с шага 2.

Шаг 2 выполняется с помощью блока {{#each ...}}, возвращающего данные из массива / коллекции.

Мой шаблон Метеор выглядит следующим образом (я привожу пример из превосходной книги «Обнаружение Метеора») -

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

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>, Посмотрите на этот скриншот из Inspector в FireFox (код выводит 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 'строки' и запуск следующего. Кто-нибудь может предложить исправление для моего кода или альтернативный метод для заполнения сетки с использованием динамических данных в Метеоре?

Ответы на вопрос(3)

Ваш ответ на вопрос