Poblando la cuadrícula de Bootstrap con datos dinámicos usando #each en Meteor

En primer lugar, gracias por su ayuda y perdona mis habilidades de Meteor y Bootstrap. Estoy teniendo un problema similar a la pregunta planteadaaquí Eso ha generado algunas sugerencias pero ninguna solución. Quiero rellenar una cuadrícula de BootStrap utilizando datos de MongoDB en una plantilla de Meteor utilizando #each. Dado que la cuadrícula BootStrap tiene 12 columnas y quiero mostrar 4 'celdas' por fila, creo que necesito:

Crea una fila usando.Salida de cuatro elementos de datos dentro de ... elemento ...Cierra el 'row div' con.Crea la siguiente fila usando ...Enjuague y repita desde el paso 2.

El paso 2 se realiza utilizando un bloque {{#each ...}} que devuelve datos de una matriz / colección.

Mi plantilla de meteorito se ve así (estoy extendiendo un ejemplo del excelente libro 'Descubriendo meteoros') -

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

El JavaScript para los Ayudantes se ve así:

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

Todo esto parece funcionar, al menos en términos de contar los elementos producidos por #each, devolviendo el</div><div class=row> para iniciar una nueva fila y restablecer el contador ... Sin embargo ... el HTML devuelto para finalizar la fila actual e iniciar la siguiente no parece ser manejado por Bootstrap (o Meteor o mi navegador) como lo espero. Parece ser re-ordenado como<div class=row></div>. Vea esta tapa de pantalla del Inspector en FireFox (el código genera 6 elementos, 4 en la primera fila, 2 en la segunda) -

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

Observe la<div class=row>...</div> en medio de los vanos? No se ve bien, debería estar cerrando el DIV de la 'fila' anterior y comenzando el siguiente. ¿Alguien puede sugerir una solución para mi código o un método alternativo para poblar una cuadrícula usando datos dinámicos en Meteor?

Respuestas a la pregunta(3)

Su respuesta a la pregunta