在流星模板中迭代For循环

dev-jim 发表于 Dev

开发吉姆

我想基于从集合中获得的x（行）和y（列）打印二维网格。

我想做这样的事情：

{{for i=0; i<=x; i++}}
   <ul class="row-{{i}}">
       {{for c==; c <=y; y++}}
           <li><span class="col-{{y}}">{{num}}</span></li>
           {{num++}}   
       {{/for}}
   </ul> 
{{/for}}

流星空格键模板不支持For循环以及模板上的变量的问题。迭代必须使用while和每个循环来完成。

那么我该如何编写模板帮助程序并在模板中使用它呢？

//example data
var grid = [
                {
                    x:10, 
                    y:20, 
                    title:"first block"
                   .....
                },
                ....
            ];
Template.grid.helpers({
    grid : function(){
               var x = grid[0].x;
               var y = grid[0].y;
               for (i = 1; i <= x; i++){

                   for(c = 1; c <= y; c++){
                   //I don't know how to continue.

                 }          
              }
           }     
});

我是流星新手，只有PHP经验。

开发吉姆

好吧，终于我明白了。以下是代码：

//example data
var grid = [
                {
                    x:10, 
                    y:20, 
                    title:"first block"
                   .....
                },
                ....
            ];
Template.grid.helpers({
    grid : function(){
               var x = grid[0].x;
               var y = grid[0].y;
               var row = [];
               var num = 1;  // for the increment number
               for (i = 1; i <= x; i++){
                   row[i] = [];//let every row has it own array
                   for(c = 1; c <= y; c++){
                   row[i].push(num);//add the increment number into each row
                   num++;

                 }          
              }
              return row;
           }     
});

并在html模板中：

{{#each row in grid}}
   <ul class="row-{{@index}}">
       {{#each num in row}}
           <li><span class="col-{{num}}">{{num}}</span></li>
       {{/each}}
   </ul> 
{{/each}}

请注意，@ index用于获取数组索引。它仅适用于流星> = 1.2版本。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。