arrays - 带有 JSON 数据并访问数组和对象的 Handlebars 模板

Question

我正在学习 Handlebars 和 JSON，所以这对某些人来说可能是一个简单的答案。我有一个 json 文件(基本上是嵌套文件夹的表示。)，包含在下面。

我无法理解如何将所有文件夹和子文件夹的路径放入我的 Handlebars 模板中。我尝试过 {{each .}}、{{#eachfolders}} 等，但我要么只得到顶部文件夹，要么什么也没有。任何帮助或指导将不胜感激!

Handlebars :

<ul>
    {{#each folders}}
        <li>{{path}}</li>
    {{/each}}
</ul>

JSON 文件:

{
    "path": "json",
    "folders": [
        {
            "path": "folder-top",
            "folders": [
                {
                    "path": "subfolder1",
                    "folders": [
                        {
                            "path": "sub-subfolder1",
                            "folders": [
                                {
                                    "path": "sub-sub-folder",
                                    "counters": {
                                        "total": 1,
                                        "images": 1,
                                        "files": 1
                                     },
                                     "name": "sub-sub-folder"
                                 }
                             ],
                             "counters": {
                                 "total": 2,
                                 "images": 1,
                                 "folders": 1,
                                 "files": 1
                             },
                             "name": "sub-subfolder1"
                         }
                     ],
                     "counters": {
                         "total": 2,
                         "images": 1,
                         "folders": 1,
                         "files": 1
                     },
                     "name": "subfolder1"
                 }
             ],
             "counters": {
                 "total": 2,
                 "images": 1,
                 "folders": 1,
                 "files": 1
             },
             "name": "folder-top"
         }
     ],
     "counters": {
         "total": 2,
         "images": 1,
         "folders": 1,
         "files": 1
     },
     "name": "json"
}

Answer 1

您的问题不容易解决，因为正如@Jojo在 another answer 中所述，您需要对未知数量的嵌套文件夹执行 {{#each}}。您问题的关键是:如何递归应用 Handlebars 模板？

为了实现递归，我们需要从模板内调用一大块模板；只要我们有子文件夹要渲染，就继续调用该 block 。 Handlebars 有partials ，它们充当可从其他模板调用的可重用模板 block 。因此，让我们为要应用于每个文件夹的模板片段创建一个部分:

<script id="RecursiveFolderPartial" type="text/template">
    <li>
        {{path}}
        {{#if folders}}
            <ul>
                {{#each folders}}
                    {{> recursiveFolder this}}
                {{/each}}
            </ul>
        {{/if}}
    </li>
</script>

请注意，我们的部分调用了部分 recursiveFolder。关键部分是，我们将确保使用名称 recursiveFolder 注册我们的部分，这样，我们的部分将递归地调用自身。

现在我们已经将大部分模板标记移至部分，模板的唯一工作是通过使用根文件夹对象作为上下文第一次调用部分来获得部分递归:

<script id="Template" type="text/template">
    <ul>
        {{> recursiveFolder this}}
    </ul>
</script>

剩下的就是正确连接我们的模板和部分，我们就可以开始了。

var raw_template = document.getElementById('Template').innerHTML;
var raw_partial = document.getElementById('RecursiveFolderPartial').innerHTML;
var template = Handlebars.compile(raw_template);

Handlebars.registerPartial('recursiveFolder', raw_partial);

我创建了一个工作 fiddle here .

更新:

如果您希望渲染当前文件夹的完整路径 - 即当前文件夹路径附加到其父文件夹的路径并用“/”分隔 - 那么您需要将当前路径连接到前一个路径并将结果传递给部分调用。

让我们首先创建一个 Handlebars 助手来连接字符串:

Handlebars.registerHelper('concat', function () {
    return Array.prototype.slice.call(arguments, 0, -1).join('');
});

接下来，我们将更新部分模板以使用 parameter我们将调用previousPath。我们的部分将输出连接previousPath“/”和当前路径的结果。我们还将使用此串联的结果作为部分递归调用的 previousPath 参数:

<li>
    {{concat previousPath '/' path}}
    {{#if folders}}
        <ul>
            {{#each folders}}
                {{> recursiveFolder this previousPath=(concat ../previousPath '/' ../path)}}
            {{/each}}
        </ul>
    {{/if}}
</li>

我们还应该更新模板，将 previousPath 参数启动为空字符串:

<ul>
    {{> recursiveFolder this previousPath=''}}
</ul>

可以找到此实现的新 fiddle here .