变色龙模板引擎:带索引的循环
Chameleon template engine: loop with index
我正在使用 Bootstrap
练习 Chameleon
模板引擎。我目前使用的布局是 Fluid layout
.
在此布局的列表部分,其使用结构如下
<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>
每个 row-fluid
div
恰好包含 3 span4
div
.
tal:repeat
in Chameleon
重复列表中的所有元素。如果列表中有 6 个元素,它会生成
<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>
然而,这破坏了之前的布局。
有没有办法只用Chameleon
做任务?
问题基本上归结为 splitting a list into evenly-sized chunks 然后使用两个嵌套循环遍历 "master" 列表及其 "sublists".
完全未经测试,我认为类似以下内容是一个很好的起点:
<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>
我正在使用 Bootstrap
练习 Chameleon
模板引擎。我目前使用的布局是 Fluid layout
.
在此布局的列表部分,其使用结构如下
<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>
每个 row-fluid
div
恰好包含 3 span4
div
.
tal:repeat
in Chameleon
重复列表中的所有元素。如果列表中有 6 个元素,它会生成
<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>
然而,这破坏了之前的布局。
有没有办法只用Chameleon
做任务?
问题基本上归结为 splitting a list into evenly-sized chunks 然后使用两个嵌套循环遍历 "master" 列表及其 "sublists".
完全未经测试,我认为类似以下内容是一个很好的起点:
<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>