Po pierwsze, dziękuję za pomoc i wybaczcie moje niemowlęce umiejętności Meteor i Bootstrap. Mam podobny problem do podniesionego pytaniatutaj który wygenerował pewne sugestie, ale nie ma rozwiązania. Chcę wypełnić siatkę BootStrap przy użyciu danych z MongoDB w szablonie Meteor używając #each. Ponieważ siatka BootStrap ma 12 kolumn i chcę wyświetlić 4 „komórki” w wierszu, uważam, że muszę -

Utwórz wiersz za pomocą.Wydaj cztery elementy danych wewnątrz ... elementu ...Zamknij „wiersz div” za pomocą.Utwórz następny wiersz, używając ...Przepłucz i powtórz od kroku 2.

Krok 2 jest wykonywany przy użyciu bloku {{#each ...}} zwracającego dane z tablicy / kolekcji.

Mój szablon Meteor wygląda tak (rozszerzam przykład z doskonałej książki „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>

JavaScript dla Pomocników wygląda tak -

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

Wszystko to wydaje się działać, przynajmniej pod względem liczenia elementów wyprowadzanych przez #each, zwracając</div><div class=row> aby rozpocząć nowy wiersz i zresetować licznik ... Jednakże ... zwrócony kod HTML, aby zakończyć bieżący wiersz i rozpocząć następny, nie wydaje się być obsługiwany przez Bootstrap (lub Meteor lub moją przeglądarkę), jak tego oczekuję. Wydaje się, że został ponownie zamówiony jako<div class=row></div>. Zobacz tę czapkę ekranu z Inspektora w FireFox (kod generuje 6 elementów, 4 w pierwszym rzędzie, 2 na sekundę) -

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

Zwróć uwagę na<div class=row>...</div> w środku rozpiętości? Nie wygląda dobrze, powinno być zamknięcie poprzedniego wiersza DIV i rozpoczęcie następnego. Czy ktoś może zasugerować poprawkę mojego kodu lub alternatywną metodę wypełniania siatki za pomocą dynamicznych danych w Meteor?