Question

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

我无法理解如何将所有文件夹和子文件夹的路径放入我的手柄模板中。我已经尝试了{{each .}}，{{#each folders}}等等，但我要么只是获取顶级文件夹，要么就是没有。任何帮助或方向将不胜感激！

车把：

<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模板？

为了实现递归，我们需要在模板中调用的一大块模板;只要我们有要渲染的子文件夹，就继续调用该块。把手有partials，可用作可从其他模板调用的可重复使用的模板块。因此，让我们为每个文件夹创建一个部分模板：

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

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

现在我们已将大部分模板标记移动到partial，我们模板的唯一工作是通过首先调用partial文件夹作为上下文来获取部分递归：

<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);

我创造了一个工作小提琴here。

<强>更新

如果要渲染当前文件夹的完整路径 - 也就是说，当前文件夹路径附加到其父文件夹的路径并用＆＃34; /＆＃34;分隔。 - 然后你需要将当前路径连接到前一个路径并将结果传递给部分调用。

让我们首先创建一个Handlebars帮助程序来连接字符串：

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

接下来，我们将更新我们的部分模板，以便使用我们称之为previousPath的{{3}}。我们的部分将输出结束previousPath＆＃34; /＆＃34;和当前的path。我们还将使用此连接的结果作为partial的recurisve调用的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>

可以找到这个实现的新小提琴parameter。

Answer 2

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

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

或者您尝试在一个维度中设置对象。

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

具有JSON数据和访问数组和对象的Handlebars模板

2 个答案: