Jak zapełnić system siatki startowej za pomocą kierownicy dla każdego polecenia w Meteor.js?

Question

Próbuję wyświetlić 3 projekty w rzędzie. Mój szablon wygląda tak: (AKTUALIZACJA)

<template name="projectList"> 
    {{breakTimeReset}} 
    <div class=row>   
    {{#each projects}} 

    {{> projectItem}} 

     {{#if breakTime}} 
     </div> 
     <div class=row> 
     {{/if}} 

    {{/each}} 
    </div> 
</template> 

Jak widać dla każdego projektu na wyjściu bazie I projectItem. Chcę wyjście je tak co 3 projektu są owinięte w

To jest mój js pomocnik

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

Moje pytanie brzmi: w jaki sposób mogę ustawić go tak, tam są 3 projekty w rzędzie, a następnie wie wstawić nowy wiersz div po każdych 3 projektach? Sposób, w jaki mam to ustawienie, prowadzi do naprawdę ostrych wyników, ponieważ nie jest niezawodny, ponieważ nowy element div zostanie wstawiony przed projektem.

Sprawdź tutaj wyników: http://testprojectapp.meteor.com

Przekonasz się, że pierwszy wiersz pojawia się ok, ale potem trochę funkowe rezultaty po tym. A jeśli przejrzysz katalog DOM przez stronę przeglądania, zobaczysz, że nie pasuje do mojego kodu, który jest dziwny.

Daj mi znać, jeśli jest to mylące pytanie. Dzięki!

Answer 1

Twoje dane mogą grupa przed pobiera renderowane:

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 "</div><!-- why? --><div class='row'>" 
     else 
      return "" 
    } 
}); 

<template name="projectList"> 
    {{breakTimeReset}} 
    {{#each projects}} 
    {{> projectRow }} 
    {{/each}} 
</template> 

<template name='projectRow'> 
    <div class='row span12'> 
    {{#each row }} 
     {{> projectItem}} 
    {{/each}} 
    </div> 
</template> 

<template name="projectItem"> 
    <div class="span4"> 
    <h3><a href="{{projectPagePath this}}"> {{title}} </a></h3> 
    <p> {{subtitle}} </p> 
    <p> {{description}} </p> 
    <p><img src="{{image}}"/></p> 
    <p> {{openPositions}} </p> 
    </div> 
</template> 

Niestety brakowało mi tak wiele razy, nearpoint!

Answer 2

AKTUALIZACJA: nie powiodło się, ponieważ silnik szablonów jest pomocny i nie pozwala na umieszczanie tagów obejmujących szablony. Równoważy każdy z nich, nawet jeśli spróbujesz po prostu wstrzyknąć tekst. Miło, jeśli tego potrzebujesz, nie jestem fanem.

Poprzedni:

Och, nearpoint przyklejone do swoich pistoletów i myliłem! Handlebars analizuje każdy szablon i "naprawia" go tak, że istnieje parzysta liczba tagów. Edytowane w celu odzwierciedlenia tego.

Szablon

<template name='sureties'> 
{{breakTimeReset}} 

{{#each allSureties }} 

    {{name}} 

    {{{breakTime}}} 

{{/each}} 
</template> 

Niektóre funkcje pomocnicze

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 "</div><div class=""> 
    else 
    return "" 

Answer 3

Możesz to również zrobić, używając zwykłego CSS. Framework Foundation ma system gridowy, w którym musisz zdefiniować kolumny w elemencie siatki, a nie w elementach potomnych, a ktoś go zaadaptował do użycia razem z bootstrapem. Oznacza to, że możesz po prostu dodać coraz więcej elementów, a siatka je rozmieści.

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

<div class="block-grid-xs-2 block-grid-sm-3 block-grid-md-4"> 
    <div> 
     Content 1 
    </div> 
    <div> 
     Content 2 
    </div> 
    <div> 
     Content 3 
    </div> 
    <div> 
     Content 4 
    </div> 
    <div> 
     Content 5 
    </div> 
    <div> 
     Content 6 
    </div> 
</div>