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?