node.jsサーバーからのjsonデータを使用し、それをdustjs-linkedinテンプレートのレンダリングコンテキストとして使用して、htmlで再帰的なディレクトリ表示を作成しようとしています。データには、次のような構造が含まれています。
{
"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}
問題は、現時点では、ブートストラップの折りたたみプラグインが要素で機能しないことです。そのため、フォルダー/ファイル アイコンをインデントしながら、クラス、、およびdisplay:table-rowの要素を html 出力で垂直方向に揃える方法を探しています。各ファイルのそれぞれの量。これはかなり具体的な質問であることを認識しているので、これを行う方法を再考するための提案を受け入れます（明らかに使用しているビューエンジンやプラットフォームを変更しないことを除いて）。file-namefile-sizefile-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;
}