玉循环对象并将孩子分配给父母

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”值的板都会自动分配给它们的父板。

所以有了这个 Javascript 函数，我的结果看起来像：

• 洛伦 1
  • Lo​​rem 1-1
• Lo​​rem 2

没关系。

但是我试图将其存档在pureJade，但没有运气。这是我的玉代码：

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

这是结果：

• Lo​​rem 1
• 洛雷姆 2
  • Lo​​rem 1-1

我的 Jade 代码有什么问题？

Answer 1

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

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

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"}];

这样你的玉码就可以改成这样：

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。请注意，在翡翠模板中，您可能应该对其进行更改，使其仅插入 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]);
  }
}