javascript - Jade 遍历对象并将 child 分配给 parent

Question

我有一个名为“boards”的对象。

[{"id":1,"parent_board":0,"title":"Lorem 1","description":"ec40db959345153a9912"},
{"id":2,"parent_board":0,"title":"Lorem 2","description":"bb698136a211ebb1dfedb"},
{"id":3,"parent_board":1,"title":"Lorem 1-1","description":"6062bc28a9f781e06417d"}]

现在我想在 Jade 中遍历这个对象。

这是我当前的 javascript 函数:

var htmlElem = document.getElementById('htmlElemId');
htmlElem.innerHTML = "";

for(var i = 0; i < boards.length; i++){
  if(boards[i].parent_board == 0){
    htmlElem.innerHTML += "<li id='" + boards[i].id + "'>" + boards[i].title + "</li>";
  }else{
    var parent = document.getElementById(boards[i].parent_board);
    if (parent){
      parent.innerHTML += "<ul><li id='" + boards[i].id + "'>" + boards[i].title + "</li></ul>";
    }
  }
}

如您所见，所有具有“parent_board”值的版 block 都会自动分配给它们的父级版 block 。

因此，使用这个 Javascript 函数，我的结果如下所示:

• 定理 1
  • 定数 1-1
• 定理 2

没关系。

不过，我正尝试将其归档到 pure Jade 中，但没有成功。这是我的 Jade 代码:

each board in boards
  if board.parent_board
    ul
      li = #{board.title}
  else
    li = #{board.title}

这是结果:

• 定理 1
• 定理 2
  • 定数 1-1

我的 Jade 代码有什么问题？

Answer 1

问题在于，在 javascript 代码中，您将第二个列表附加到正确的父元素。在您拥有的 jade 代码中，您只是将其附加到 html 的末尾，因此它将始终以该特定顺序显示。简单的解决方案是将 Lorem 1-1 对象放在数组中的 Lorem1 之后，但这样效率很低。

模板引擎实际上只适用于非常轻的逻辑，我们正在进入复杂逻辑的领域，而无需对数据结构做一点改变。将您的 boards 对象更改为两个单独的对象可能会更好:

boards = [{"id":1,"parent_board":0,"title":"Lorem 1","description":"ec40db959345153a9912"},
         {"id":2,"parent_board":0,"title":"Lorem 2","description":"bb698136a211ebb1dfedb"}];

subboards = [{"id":3,"parent_board":1,"title":"Lorem 1-1","description":"6062bc28a9f781e06417d"}];

这样你的jade代码就可以改成这样了:

each board in boards
  li = #{board.title}
  each subboard in subboards
    if subboard.parent_board == board.id
      ul
        li = #{subboard.title} 

或者，一个更好的解决方案是更改板对象，以便子板位于父板内:

boards = [{"id":1,"parent_board":0,"title":"Lorem 1","description":"ec40db959345153a9912", "subboards": 
             [{"id":3,"parent_board":1,"title":"Lorem 1-1","description":"6062bc28a9f781e06417d"}]},
         {"id":2,"parent_board":0,"title":"Lorem 2","description":"bb698136a211ebb1dfedb"}];

each board in boards
  li = #{board.title}
  each subboard in board.subboards
      ul
        li = #{subboard.title} 

用于从平面数据结构填充对象的 JS。请注意，在 jade 模板中，您可能应该更改它，以便它只插入 parent_board == 0 的板或从主数组中删除子板对象:

for(var i = 0; i < boards.length; i++){

  var boardId = boards[i].id;
  var boardParent = boards[i].parent_board;

  if(boardParent !== 0){
    // Check to see if the array exists for a start
    if (!boards[boardParent].subboards) {
        // If not then create a new array
        boards[boardParent].subboards = [];
    }
    boards[boardParent].subboards.push(boards[i]);
  }
}