Arrays 带有JSON数据和访问数组和对象的Handlebar模板

我正在学习Handlebar和JSON，所以这对一些人来说可能是一个简单的答案。 我有一个json文件（基本上是嵌套文件夹的表示形式），包括在下面

我很难理解如何将所有文件夹和子文件夹的路径放入我的Handlebar模板中。我试过

{{each.}

，

{{{{each folders}}}

等等，但我要么只得到了最上面的文件夹，要么什么都没有。任何帮助或指导都将不胜感激

车把：

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

---

实际上，您只在对象的第一个维度上进行迭代。因此，如果您知道对象有多少维度，请尝试以下方法：

{{#each folders}}
  {{#each folders}}
    {{#each folders}}
      {{#each folders}}
         ...
      {{/each}}
    {{/each}}
  {{/each}}
{{/each}}

或者尝试在一维中设置对象

无论如何，我不知道如何在对象的n维上进行迭代。

您的问题不容易解决，因为正如@Jojo在中所述，您需要在未知数量的嵌套文件夹上进行

{{each}

。问题的关键是：如何递归地应用Handlebar模板

为了实现递归，我们需要从模板中调用模板块；只要我们有子文件夹要渲染，就一直调用该块。Handlebar具有，它充当可从其他模板调用的可重用模板块。因此，让我们为要应用于每个文件夹的模板创建一个部分：

<script id="RecursiveFolderPartial" type="text/template">
    <li>
        {{path}}
        {{#if folders}}
            <ul>
                {{#each folders}}
                    {{> recursiveFolder this}}
                {{/each}}
            </ul>
        {{/if}}
    </li>
</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);

我制作了一把小提琴

更新：

如果希望呈现当前文件夹的完整路径（即当前文件夹路径附加到其父文件夹路径并以“/”分隔），则需要将当前路径连接到上一个路径，并将结果传递给部分调用

让我们首先创建一个手柄辅助对象来连接字符串：

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

接下来，我们将更新部分模板，以使用我们将调用的

previousPath

。我们的分部将输出concating

previousPath

“/”和当前

路径的结果。我们还将使用此连接的结果作为部分的递归调用的
previousPath
参数：

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

可以找到此实现的新功能。
谢谢！这太棒了，我永远也想不到！有一个问题，是否有一种简单的方法可以使用此命令写入文件夹的完整路径？e、 g文件夹顶部/子文件夹1/子文件夹1。我尝试了
{../path}/{{path}}
但是没有成功。使用您的代码，我学到了一些关于partials的知识。谢谢我正在努力解决的一件事是如何只获取每个文件夹的包含文件夹的名称。我真的很感激任何关于如何整合的方向。我的大脑在递归@Macsupport：我不太明白你的意思。您的解决方案非常混乱，并且有很多不必要的复杂性。是一个更好的方法的例子。@Macsupport：如果我理解您的意思，您只需要通过每次递归调用将
名称
值从根对象传递到，就像对
以前的路径
和
包含FolderName
所做的那样。下面是一个使用“rootName”作为变量名的示例：
Handlebars.registerHelper('concat', function () {
    return Array.prototype.slice.call(arguments, 0, -1).join('');
});

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

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