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