使用JSON数据的Handlebars模板并访问数组和对象。

I am learning handlebars and JSON, so this may be an easy answer for some. I have a json file (basically a representation of nested folders.), included below.

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

I am having trouble understanding how to get the path of all the folders and subfolders into my handlebars template. I have tried {{each .}}, {{#each folders}}, etc. but I either just get the top folder or nothing. Any help or direction would be greatly appreciated!

我很难理解如何将所有文件夹和子文件夹的路径放入我的handlebars模板中。我尝试了{{{{}}，{#每个文件夹}，等等，但是我要么得到顶部文件夹要么什么都没有。非常感谢您的帮助和指导!

Handlebars:

车把:

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

JSON File:

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"
}

2 个解决方案

#1

Your question is not easily solved because, as @Jojo has stated in another answer, you need to do an {{#each}} over an unknown number of nested folders. The crux of your question is: how to recursively apply a Handlebars template?

您的问题不容易解决，因为正如@Jojo在另一个答案中所述，您需要对数量未知的嵌套文件夹执行{{#each}。问题的关键是:如何递归地应用一个把手模板?

In order to achieve our recursion, we will need to call a chunk of template from within our template; and keep calling that chunk for as long as we have child folders to render. Handlebars has partials, which serve as reusable chunks of template to be called from other templates. So let's create a partial for piece of template that is to be applied to each folder:

为了实现我们的递归，我们需要从模板中调用一大块模板;只要我们有子文件夹可以渲染，就可以一直调用这个块。handlebar有部分，可以作为可重用的模板块从其他模板调用。因此，让我们为每个文件夹创建一个局部模板:

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

Note that our partial calls a partial, recursiveFolder. The crucial part is that we will make sure to register our partial with the name, recursiveFolder, that way, our partial will recursively call itself.

注意，我们的分部调用了一个分部递归文件夹。关键的部分是，我们将确保用名称recursiveFolder注册我们的分部，这样，我们的分部将递归地调用自己。

Now that we have moved most of the template markup to the partial, the only job for our template is to get our partial recursing by making the first call to the partial with the root folder object as context:

既然我们已经将大部分模板标记移动到分部，那么我们的模板的惟一工作就是对分部进行第一次调用，并将根文件夹对象作为上下文:

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

All that is left for us to is to correctly wire-up our template and partial and we should be ready to go.

我们要做的就是正确地修改我们的模板和部分，我们应该准备好了。

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

I have created a working fiddle here.

我在这里创造了一把小提琴。

Update:

更新:

If you wish to render the full path to the current folder - that is, the current folder path appended to its parent folder's paths and delimited with a "/" - then you will need to concatenate the current path onto the previous path and to pass the result to the partial call.

如果你想呈现当前文件夹的完整路径——也就是说,当前文件夹路径附加到它的父文件夹的路径,并以一个“/”分隔,那么您将需要连接当前路径到前面的路径和通过部分调用的结果。

Let's begin by creating a Handlebars helper to concatenate strings:

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

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

Next, we will update our partial template to make use of a parameter that we will call previousPath. Our partial will output the result of concating previousPath "/" and the current path. We will also use the result of this concatenation to be the previousPath parameter to the recurisve calls of the partial:

接下来，我们将更新我们的部分模板，以使用一个我们将称为previousPath的参数。我们的偏微分将输出预微分方程的结果“/”和当前路径。我们还将使用这个串联的结果作为previousPath参数，用于部分的recurisve调用:

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

We should also update our template to start the previousPath parameter to an empty string:

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

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

An new fiddle with this implementation can be found here.

这里可以找到这个实现的一个新功能。

#2

You actually iterate only over the first dimension of the Object. So either, if you know how many dimensions your object have, try something like:

实际上，您只对对象的第一个维度进行迭代。所以，如果你知道你的物体有多少个维度，你可以试试

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

Or you try to setup the Object in just one dimension.

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

Anyhow i have no clue how to itarate over n dimensions of an object.

无论如何，我不知道如何在一个物体的n维上倾斜。

#1