在Jade-Template中使用if条件的每个循环

时间:2014-01-15 14:25:30

标签: html node.js express pug each

HeJ小鼠。

我正在尝试在每个第9个元素的开头和后面写一个tr。 为此,我使用模数运算符,如上例所示 如果我想将td写入同一个tr并且else条件,例如它会创建另一个tr

有人看到了什么问题吗?或者它如何运作?

代码示例

extends layout.jade

    block body  
       table  
         each result, i in results
         if (i%9==0)
           tr
             td.ranking
             div.rank
                p=(i+1)+'.'
                div.points
                   p=result.points
                div.person                              
                   p.name=result.name
                   p=result.company  
         else
             td.ranking
             div.rank
                p=(i+1)+'.'
                div.points
                   p=result.points
                div.person                              
                   p.name=result.name
                   p=result.company

HTML输出

Jade Html output

1 个答案:

答案 0 :(得分:1)

其中一个解决方案如下:

假设您的快递处理程序中有变量results

var results =  ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r'];

请注意,这可能是一个对象数组。为简单起见,我使用了从a到`r。

的字符串

让我们将该数组拆分为行和列的二维数组:

var results2d = [];
while(results[0]) {
     results2d.push(results.splice(0, 9));
}

我总是喜欢在快速处理程序中执行所有转换,以减少模板中额外的代码行数。

所以你的results2d如下:

[ [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' ],
  [ 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p' ],
  [ 'q', 'r' ] ]

然后你可以将它传递给Jade模板:

res.render('templateId', { results:results2d  });

在模板中,您的代码可以如下:

table  
    - var i = 1;
    each result in results
        tr
            each item in result
                td.ranking
                    div.rank
                        p=(i++)+'.'
                        div.points
                            p=result.points
                        div.person                              
                            p.name=result.name
                            p=result.company 

您的HTML输出如下:

results

我希望这会有所帮助。