Question

我有一个名为boundedArea的对象，它包含字段boundedArea中的children个对象数组，我想创建一个无序列表树。

我有以下代码：

- for (var index = 0; index < rootAreas.length; index++) {
  - var boundedArea = rootAreas[index];
  div(class='panel panel-default')
    div.panel-heading
      | #{boundedArea.NAME}
    div.panel-body
      - printChildren(boundedArea, 0); 
- }
- 
- function printChildren(boundedArea, depth) {
  - var children = boundedArea.children;
  - if (children == null || children.length == 0) {
    - return;
  - } 
  ul  
  - for (var index = 0; index < children.length; index++) {
    - var child = children[index];
    li #{child.NAME}
    - console.log("Printing %s child of %s", child.NAME, boundedArea.NAME);
    - printChildren(child, depth + 1); 
  - } 
- }

现在很明显，这种方式可以打印出所有值。但是，因为ul和li标记是一个固定的缩进，它们不会嵌套并且最终会按顺序打印。

有没有办法动态设置缩进级别或强制嵌套。或者我应该使用完全不同的嵌套模型。

我尝试为每个深度级别创建一个填充了两个空格的javascript变量缩进，然后尝试使用#{indent}，但最终创建了带有空格的标记，其中的空格不是我想要的。虽然这意味着围绕这个想法的某些东西可以起作用，因为它必须在某种程度上解决，但它被作为某种形式的代币拾取。

Answer 1

尝试使用mixin而不是函数。 Mixins尊重/记住缩进的级别（不确定为什么函数不会）。

mixin printChildren(boundedArea, depth)
  - var children = boundedArea.children;
  - if (children == null || children.length == 0)
    - return;
  ul  
    - for (var index = 0; index < children.length; index++)
      - var child = children[index];
      li #{child.NAME}
        +printChildren(child, depth + 1)

- for (var index = 0; index < rootAreas.length; index++)
  - var boundedArea = rootAreas[index];
  div(class='panel panel-default')
    div.panel-heading
      | #{boundedArea.NAME}
    div.panel-body
      +printChildren(boundedArea, 0)

我稍稍调整了你的代码。使用+而不是-调用Mixins，并且在使用它们之前需要对它们进行定义。

我用这个样本数据测试了它：

{
  rootAreas: [
    {
      NAME: 'area1',
      children: [
        { NAME: 'child1' },
        { NAME: 'child2' },
        { 
          children: [
            { NAME: 'child3' },
            { NAME: 'child4' },
          ]
        },
      ]
    },
    {
      NAME: 'area2',
      children: [
        { NAME: 'child5' },
        { NAME: 'child6' },
        { NAME: 'child7' },
      ]
    }
  ]
}

模板产生了这个HTML代码：

<div class="panel panel-default">
  <div class="panel-heading">area1</div>
  <div class="panel-body">
    <ul> 
      <li>child1</li>
      <li>child2</li>
      <li>
        <ul> 
          <li>child3</li>
          <li>child4</li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">area2</div>
  <div class="panel-body">
    <ul> 
      <li>child5</li>
      <li>child6</li>
      <li>child7</li>
    </ul>
  </div>
</div>

如果我理解正确，这就是您正在寻找的。

使用jade创建无序列表树

1 个答案: