在流星模板中迭代 For 循环

Question

我想根据从集合中获得的 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 和 each 循环来完成。

那么我将如何编写模板助手并在模板中使用它？

//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 方面的经验。

Answer 1

好吧，我终于想通了。以下是代码：

//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版本。

Answer 2

使用空格键可以使用{{#each}} 标签。这是您的案例的示例：

{{#each rows}}
   <ul class="row-{{rowIndex}}">
       {{#each columns}}
           <li><span class="col-{{columnIndex}}">{{num}}</span></li>
       {{/each}}
   </ul> 
{{/each}}

您的数据在 JSON 中需要如下所示：

{
    rows: [
        {
            rowIndex: 1,
            columns: [
                {
                    columnIndex: 1,
                    num: 100,
                },
                {
                    columnIndex: 2,
                    num: 200,
                },
            ]
        },
        {
            rowIndex: 2,
            columns: [
                {
                    columnIndex: 1,
                    num: 100,
                },
                {
                    columnIndex: 2,
                    num: 200,
                },
            ]
        }
    ]
}

您可以看到 JSON 对象有一个 rows 字段，它是一个数组。每个row 都有一个rowIndex 和一个columns 数组。每个column 都有一个columnIndex 等。

您需要像这样命名一个助手并返回该 JSON 对象：

Template.grid.helpers({
    rows: function() {
        return theJSONObject.rows;
    }
});