在多个部分中使用一个 json 文件

Question

我正在处理需要在页面顶部和页脚导航的页面。导航本身是相同的栏，但有一些 class/layout 更改，所以我想将它保存在一个 json 文件中。这可能吗？

目前，只会填充页脚。我正在使用 grunt-assemble 构建 html 模板。

JSON:

{
    "pages": [
        { 
            "linkTitle": "page 1",
            "subnav": [
                { 
                    "subNavLinkTitle": "temp",
                    "url": "temp.html" 
                },
                { 
                    "subNavLinkTitle": "form",
                    "url": "form.html"
                },
                { 
                    "subNavLinkTitle": "map",
                    "url": "map.html"
                }
            ]
        },
        { 
            "linkTitle": "page 2",
            "subnav": [
                { 
                    "subNavLinkTitle": "sub page 4",
                    "url": "#"
                },
                { 
                    "subNavLinkTitle": "sub page 5",
                    "url": "#"
                },
                { 
                    "subNavLinkTitle": "sub page 6",
                    "url": "#"
                },
                { 
                    "subNavLinkTitle": "sub page 7",
                    "url": "#"
                },
                { 
                    "subNavLinkTitle": "sub page 8",
                    "url": "#"
                }
            ]
        }
    ]
}

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    {{> header }}
</head>
<body>
    {{> top }}
    {{> body }}
    {{> footer }}
</body>
</html>

顶部：

<ol class="nav-top">
{{#each nav.pages}}
    <li>
        <a href="#" class="has-sub-nav">{{ linkTitle }}<i></i></a>
        <div class="sub-nav">
            <ul>
                {{#each subnav}}
                <li><a href="{{ url }}">{{ subNavLinkTitle }}</a></li>
                {{/each}}
            </ul>
        </div>
    </li>
{{/each}}
</ol>

页脚：

<ol class="nav-footer">
{{#each nav.pages}}
    <li>
        <span class="section">{{ linkTitle }}</span>
        <ul>
            {{#each subnav}}
            <li><a href="{{ url }}">{{ subNavLinkTitle }}</a></li>
            {{/each}}
        </ul>
    </li>
{{/each}}
</ol>

Answer 1

我认为你所拥有的应该可以工作，但为了以防万一，请尝试在你的部分文件中引用该文件：

{{> top nav }}

然后在您的顶部部分中，只需使用：

{{#each pages }}

这就是我过去做类似事情时没有问题的方式...

在多个部分中使用一个 json 文件

Using one json file in multiple partials

handlebars.js

assemble