pythoncsstwitter-bootstrappyramidchameleon

Chameleon template engine: loop with index

I am practicing Chameleon template engine with Bootstrap. The layout I am currently using is Fluid layout.

In the listing part of this layout, its using structure like

<div class="row-fluid">
    <div class="span4">******</div>
    <div class="span4">******</div>
    <div class="span4">******</div>
</div>
<div class="row-fluid">
    <div class="span4">******</div>
    <div class="span4">******</div>
    <div class="span4">******</div>
</div>

Each row-fluid div contains exactly 3 span4 div.

tal:repeat in Chameleon repeats all the elements in the list. If I have 6 element in a list, it generates

<div class="row-fluid">
    <div class="span4">******</div>
    <div class="span4">******</div>
    <div class="span4">******</div>
    <div class="span4">******</div>
    <div class="span4">******</div>
    <div class="span4">******</div>
    <div class="span4">******</div>
</div>

However, this ruins the previous layout.

Is there anyway to do the task only with Chameleon?

Solution

  • The problem basically boils down to splitting a list into evenly-sized chunks and then using two nested loops to iterate over the "master" list and its "sublists".

    Completely untested, I would think something like the following would be a good starting point:

    <div class="row-fluid" tal:repeat="chunk [l[i*3:(i*3)+3] for i in range((len(l) // 3) + 1) ]">
    <div class="span4" tal:repeat="item chunk"><tal:item replace="item" /></div>
</div>