Question

我想根据从集合中获得的x（行）和y（列）打印2维网格。

我想做这样的事情：

{{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}}

meteor spacebars模板的问题不支持 For 循环以及模板上的变量。迭代必须使用，和每个循环完成。

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

//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.

                 }          
              }
           }     
});

我是meteor的新手，只有PHP经验。

Answer 1

使用空格键，您可以使用{{#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;
    }
});

Answer 2

好的，最后我明白了。以下是代码：

//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用于获取数组索引。它只适用于meteor＆gt; = 1.2版本。

迭代在流星模板中循环

2 个答案: