Chameleon template engine: loop with index

Question

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?

I have been waiting to see what the answers would be. I'm thinking you could do it by injecting python via chameleon. Typical inner loop and outer loop code. Have you tried anything like that? — fat fantasma, Jul 24 '15 at 23:24
@fatfantasma Yep. I already satisfied the requirement with some dirty hack. The only reason I put the question here is to look for a 'elegant' way to achieve this. :-) — Lingfeng Xiong, Jul 27 '15 at 00:36

score 1 · Accepted Answer · edited May 23 '17 at 12:32

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>

Chameleon template engine: loop with index

1 Answers1