Acceleo:在for循环中动态生成HTML网格

时间:2014-07-09 17:36:25

标签: html acceleo

我使用Acceleo 3.0从EMF模型生成一些HTML代码。我有以下代码:

<div class="ui-grid" style="text-align:center">
    [for ( icon : Icon | self.Icons )]
            <div class="column-a"><button data-icon="[iconName/]"></button></div>
            <div class="column-b"><button data-icon="[iconName/]"></button></div>
            <div class="column-c"><button data-icon="[iconName/]"></button></div>
    [/for]
</div>

现在,我想做的是使其完全参数化,逐步在for循环中应用类名,直到我在模型中达到MaxColumns参数,然后从0开始。 即,如果我有MaxColumns = 3,我希望得到以下结果:

<div class="ui-grid" style="text-align:center">
  <div class="column-a"><button data-icon="icon-1"></button></div>
  <div class="column-b"><button data-icon="icon-2"></button></div>
  <div class="column-c"><button data-icon="icon-3"></button></div>
  <div class="column-a"><button data-icon="icon-4"></button></div>
  <div class="column-b"><button data-icon="icon-5"></button></div>
  <div class="column-c"><button data-icon="icon-6"></button></div>
  <div class="column-a"><button data-icon="icon-7"></button></div>
  <div class="column-b"><button data-icon="icon-8"></button></div>
  <div class="column-c"><button data-icon="icon-9"></button></div>
  ...
</div>

提前致谢。

1 个答案:

答案 0 :(得分:6)

假设您的MaxColumn属性由self(在您描述的上下文中)开启,如果此引用是序列,您可以在subSequence(start, end)上使用Icons运算符。这是代码:

<div class="ui-grid" style="text-align:center">
[for ( icon : Icon | self.Icons->subSequence(1, self.MaxAttribute) )]
        <div class="column-a"><button data-icon="[iconName/]"></button></div>
        <div class="column-b"><button data-icon="[iconName/]"></button></div>
        <div class="column-c"><button data-icon="[iconName/]"></button></div>
[/for]

如果您的引用不是序列(但是有序,那么OrderedSet):

<div class="ui-grid" style="text-align:center">
[for ( icon : Icon | self.Icons->asSequence()->subSequence(1, self.MaxAttribute) )]
        <div class="column-a"><button data-icon="[iconName/]"></button></div>
        <div class="column-b"><button data-icon="[iconName/]"></button></div>
        <div class="column-c"><button data-icon="[iconName/]"></button></div>
[/for]

然而,请记住,如果你的参考。如果没有订购,Acceleo可以为每次执行收集不同顺序的集合元素。使用asSequence()不会改变任何内容。

另外,请注意,收集第一个索引是 1 不是 0