我正在尝试使用来自 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;
}