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

【问题标题】：Using one json file in multiple partials在多个部分中使用一个 json 文件
【发布时间】：2015-08-13 09:10:51
【问题描述】：

我正在处理需要在页面顶部和页脚导航的页面。导航本身与一些类/布局更改相同，因此我想将其保存在一个 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>

【问题讨论】：

我对导航的 JSON 数据做了类似的事情，我认为你的设置应该可以工作。是否包含来自 top 部分的静态内容，例如 <ol class="nav-top">？
顶部部分根本没有被渲染。内容（链接标题、网址、子导航链接标题）相同，但页脚的 html 略有不同。
如果输出中没有包含标头部分的任何部分，为什么您认为 JSON 数据有问题？如果您剥离导航数据并将“Hello，Header”放在部分中，是否会包含标题？
我认为 JSON 没有问题，因为它在页脚中呈现良好。标题只是给了我<ol class="nav-top"></ol>。
尝试将{{log nav.pages}} 放在顶部，这是否会在 grunt assemble 任务期间将页面数据输出到控制台？

标签： handlebars.js assemble

【解决方案1】：

我认为您所拥有的应该可以工作，但以防万一，请尝试将文件与您的部分一起引用：

{{> top nav }}

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

{{#each pages }}

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

【讨论】：