¿Cómo puedo completar un sistema de grilla de arranque utilizando manubrios para cada comando en Meteor.js?

Estoy tratando de mostrar 3 proyectos por fila. Mi plantilla se ve así: (ACTUALIZADO)

 {{breakTimeReset}} 
{{#each projects}} {{> projectItem}} {{#if breakTime}}
{{/if}} {{/each}}

Como puede ver para cada proyecto en la base de datos, genero projectItem. Quiero darles salida así que cada 3 proyectos están envueltos en un

Este es mi js helper

 Template.projectList.helpers({ projects: function() { return Projects.find(); }, breakTimeReset: function() { Template.projectList.doCount = 0; }, breakTime: function () { count = Template.projectList.doCount + 1; console.log(count); Template.projectList.doCount = count; if (count % 3 == 0) { console.log("Started break"); return true; } else return false; } }); 

Mi pregunta es ¿cómo puedo configurarlo para que haya 3 proyectos por fila, y luego sepa insertar un nuevo div de fila después de cada 3 proyectos? La forma en que lo tengo configurado actualmente conduce a resultados realmente originales, ya que no es confiable ya que el nuevo div se insertará antes del proyecto.

Vea los resultados aquí: http://testprojectapp.meteor.com

Verás que la primera fila aparece bien pero luego obtengo algunos resultados originales. Y si revisas el DOM a través de la fuente de la página de visualización, verás que no coinciden con mi código, lo cual es extraño.

Avísame si esta es una pregunta confusa. ¡Gracias!

Puede agrupar sus datos antes de que se procesen:

 Template.projectList.helpers({ projects: function () { all = Projects.find({}).fetch(); chunks = []; size = 3 while (all.length > 3) { chunks.push({ row: all.slice(0, 3)}); all = all.slice(3); } chunks.push({row: all}); return chunks; }, breakTimeReset: function () { Template.projectList.doCount = 0; }, breakTime: function () { count = Template.projectList.doCount + 1; console.log(count); Template.projectList.doCount = count; if (count % 3 == 0) return "
" else return "" } });

Perdón por haberme perdido tantas veces, ¡punto cercano!

También puedes hacer eso usando CSS simple. Foundation Framework tiene un sistema de grillas en el que necesita definir las columnas en el elemento de grilla, no en los elementos secundarios en sí y alguien lo adaptó para usarlo junto con el arranque. Esto significa que simplemente puede agregar más elementos y la cuadrícula los distribuirá.

https://github.com/JohnnyTheTank/bootstrap-block-grid

 
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6

ACTUALIZACIÓN: falla porque el motor de plantilla es útil y no le permitirá tener tags que abarquen las plantillas. Equilibra cada uno, incluso si intenta solo inyectar texto. Bien si lo necesitas, no soy un fan.

Anterior:

¡Oh, punto cercano pegado a sus armas y estaba equivocado! Handlebars analiza cada plantilla y la ‘corrige’ para que haya un número par de tags. Editado para reflejar esto.

La plantilla

  

Algunas funciones de ayuda

 Template.sureties.breakTimeReset = -> Template.sureties.docCount = 0 '' Template.sureties.breakTime = -> count = Template.sureties.docCount + 1 or 0 console.log count Template.sureties.docCount = count if count % 3 is 0 return "
else return ""