如何用用户循环渲染翡翠布局

Question

我正在尝试渲染类似的东西：

<div class="row">
    <div class"test">
       User 1
    </div>
    <div class"test">
       User 2
    </div>
    <div class"test">
       User 3
    </div>
</div>
<div class="row">
    <div class"test">
       User 4
    </div>
    <div class"test">
       User 5
    </div>
    <div class"test">
       User 6
    </div>
</div>

每个 .row 我需要 3 个 .test：

  - var count = 0
  div.row
  for user in Users
    - count++
    -if ((count % 3) == 0)
      div.test  
        | #{user.name}
      div.row
    -else
      div.test
        | #{user.name}

但是，它不起作用，因为当循环尝试呈现时 "div.row" 它会自动关闭标签。

错误的结果是：

<div class="row"></div>
<div class="test">User 1</div>
<div class="test">User 2</div>
<div class="test">User 3</div>
<div class="row"></div>
<div class="test">User 4</div>
<div class="test">User 5</div>
<div class="test">User 6</div>
<div class="row"></div>

Answer 1

一种可能的方法是在将用户数组发送到 jade 之前重新组织它。

Users = [[user1,user2,user3],[user4,user5,user6],...

然后在玉

for group in Users
    div.row
        for user in group
            div.test
                | #{user.name}

Answer 2

var test = [{'1':'a','t':0},{'2':'b','t':0},{'3':'c','t':0},{'4':'d','t':0},{'5':'e','t':0},{'6':'f','t':0},{'8':'h','t':0},{'9':'i','t':0}];
//console.log(test)
var i=1;
var j=1;
_.each(test,function(t){
    t.g = j;
    if((i % 3) == 0){
        j++;
    }
    i++;
    return(t);
});
var test2 = _.groupBy(test,function(t){return t.g});
console.log(test2);

如何用用户循环渲染翡翠布局

How to render jade layout with loop of users

node.js

pug