Question

我正在尝试使用来自node.js服务器的json数据在html中进行递归目录显示，并将其用作dustjs-linkedin模板的呈现上下文。数据包含如下结构：

{
  "isDirectory": true,
  "path": "",
  "name": "",
  "files": [
    {
      "name": "Light House.jpg",
      "filename": "Light%20House.jpg",
      "path": "/Light%20House.jpg",
      "bytes": 561276,
      "date": "2012-07-25T16:30:45.094Z",
      "prettyDate": "Jul 25 2012 11:30:45",
      "type": "image/jpeg",
      "size": "548.1 kB",
      "indent": 15,
      "id": "file0"
    },
    {
      "isDirectory": true,
      "path": "/folder0",
      "name": "folder0",
      "files": [
        {
          "name": "Desert.jpg",
          "filename": "Desert.jpg",
          "path": "/folder0/Desert.jpg",
          "bytes": 845941,
          "date": "2012-07-25T16:30:41.301Z",
          "prettyDate": "Jul 25 2012 11:30:41",
          "type": "image/jpeg",
          "size": "826.1 kB",
          "indent": 30,
          "id": "file0_0"
        }
      ],
      "id": "file0_0",
      "indent": 15,
      "bytes": 845941,
      "date": "2012-07-25T16:30:41.301Z",
      "prettyDate": "Jul 25 2012 11:30:41",
      "size": "826.1 kB"
    },
    {
      "isDirectory": true,
      "path": "/folder1",
      "name": "folder1",
      "files": [
        {
          "name": "Jellyfish.jpg",
          "filename": "Jellyfish.jpg",
          "path": "/folder1/Jellyfish.jpg",
          "bytes": 775702,
          "date": "2012-07-25T16:30:41.266Z",
          "prettyDate": "Jul 25 2012 11:30:41",
          "type": "image/jpeg",
          "size": "757.5 kB",
          "indent": 30,
          "id": "file0_1"
        }
      ],
      "id": "file0_1",
      "indent": 15,
      "bytes": 775702,
      "date": "2012-07-25T16:30:41.266Z",
      "prettyDate": "Jul 25 2012 11:30:41",
      "size": "757.5 kB"
    },
    {
      "isDirectory": true,
      "path": "/folder2",
      "name": "folder2",
      "files": [
        {
          "name": "Koala.jpg",
          "filename": "Koala.jpg",
          "path": "/folder2/Koala.jpg",
          "bytes": 780831,
          "date": "2012-07-25T16:30:41.384Z",
          "prettyDate": "Jul 25 2012 11:30:41",
          "type": "image/jpeg",
          "size": "762.5 kB",
          "indent": 30,
          "id": "file0_2"
        }
      ],
      "id": "file0_2",
      "indent": 15,
      "bytes": 780831,
      "date": "2012-07-25T16:30:41.384Z",
      "prettyDate": "Jul 25 2012 11:30:41",
      "size": "762.5 kB"
    },
    {
      "isDirectory": true,
      "path": "/folder3",
      "name": "folder3",
      "files": [
        {
          "name": "Penguins.jpg",
          "filename": "Penguins.jpg",
          "path": "/folder3/Penguins.jpg",
          "bytes": 777835,
          "date": "2012-07-25T20:42:31.170Z",
          "prettyDate": "Jul 25 2012 15:42:31",
          "type": "image/jpeg",
          "size": "759.6 kB",
          "indent": 30,
          "id": "file0_4"
        }
      ],
      "id": "file0_4",
      "indent": 15,
      "bytes": 777835,
      "date": "2012-07-25T20:42:31.170Z",
      "prettyDate": "Jul 25 2012 15:42:31",
      "size": "759.6 kB"
    }
  ],
  "id": "file0",
  "indent": 0,
  "bytes": 3741585,
  "date": "2012-07-25T20:42:31.170Z",
  "prettyDate": "Jul 25 2012 15:42:31",
  "size": "3.6 MB"
}

现在呈现的模板是：

<!-- views/directory.dust -->
<!-- note that {.parentId} is equal to "file0" initially -->
{?.isDirectory}
<div class="collapse file-stats {parentId}" data-toggle="collapse" data-target="[class*={.id}]" style="font-size:15px">
    <div class="file-name">
        <div style="display:inline-block;width:{.indent}px"></div>
        <i class="icon-folder-open"></i> 
        {.name}
    </div>
    <div class="file-size">
        {.size}
    </div>
    <div class="file-date">
        {.prettyDate}
    </div>
</div>
{#.isDirectory parentId=.id}
    {#files}
        {>"views/directory.dust"/}
    {/files}
{/.isDirectory}
{:else}
<div class="collapse file-stats {.id}" style="font-size:15px">
    <div class="file-name">
        <div style="display:inline-block;width:{.indent}px"></div>
        <i class="icon-file"></i> 
        {.name}
    </div>
    <div class="file-size">
        {.size}
    </div>
    <div class="file-date">
        {.prettyDate}
    </div>
    <!--<span class="btn-group">
        <a class="btn btn-mini" href="/projects/{uri}/downloads/{.path}">
            <i class="icon-download"></i>
        </a>
        <button class="btn btn-mini" onclick="settings('/projects/{uri}/update/{.path}', '{.filename}', '{.path}')">
            <i class="icon-edit"></i>
        </button>
    </span>
    <a class="btn btn-mini btn-danger pull-right" href="/projects/{uri}/remove/{.path}">
        <i class="icon-trash"></i>
    </a>
    <div class="clearfix"></div>-->
</div>
{/.isDirectory}

问题是截至目前，bootstrap的崩溃插件无法与display:table-row元素一起使用，因此我正在寻找一种方法使html输出垂直对齐元素类file-name，file-size和file-date，同时缩进每个文件的文件夹/文件图标各自的数量。我意识到这是一个相当具体的问题，所以我会接受任何建议来重新思考我这样做的方式（除非我不会改变视图引擎或我正在使用的平台）。

修改

我想指出现在呈现的方式，我提到的最后一段中的所有内容都很有效，除了崩溃插件。我也可能会指出，我用来使垂直对齐工作的所有css都在这里：

.files {
    display:table;
}

.file-stats {
    display:table-row;
}

.file-name, .file-size, .file-date {
    padding: 0px 4px 0px 4px;
}

.file-name {
    display:table-cell;
    overflow: hidden;
    text-overflow:ellipsis;
}

.file-size {
    display:table-cell;
    overflow: hidden;
    text-overflow:ellipsis;
}

.file-date {
    display:table-cell;
    overflow: hidden;
    text-overflow:ellipsis;
}

Answer 1

使用display:inline-block与a placeholder一起垂直对齐元素而不使用display:table-row。要处理递归缩进，将div class="collapse"替换为blockquote class="collapse"可能会有效。

如何用css格式化递归目录？

1 个答案: