我正在使用https://www.npmjs.com/package/grunt-mustache-render使用布局文件和 json 文件呈现 HTML 文件。
这是 Grunt 任务:
mustache_render: {
json_data: {
files: [
{
data: 'output.json',
template: 'test.mustache',
dest: 'tmp/hello_json.html'
}
]
}
}
输出 JSON 如下所示:
[
{
"name": "John Doe",
"age": "30"
},
{
"name": "Alex Len",
"age": "27"
},
{
"name": "Debbie John",
"age": "36"
}
]
test.mustache 看起来像这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mustache Sample</title>
</head>
<body>
<h2>Titles</h2>
<ul id="talktitles">
<script id="speakers-template" type="text/template">
{{#options}}
<li>{{{name}}}, {{{age}}}</li>
{{/options}}
</script>
</ul>
</body>
</html>
当我运行 grunt 时，它创建了 tmp/hello_json.html 文件，但未填充值。它看起来像这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mustache Sample</title>
</head>
<body>
<h2>Titles</h2>
<ul id="talktitles">
<script id="speakers-template" type="text/template">
</script>
</ul>
</body>
</html>
我在这里做错了什么？
最佳答案
您的output.json 不符合模板。模板等待 json 文件中的 options 值，但没有这样的键。
正确的输出json应该是这样的:
{
options: [{
"name": "John Doe",
"age": "30"
}, {
"name": "Alex Len",
"age": "27"
}, {
"name": "Debbie John",
"age": "36"
}]
}
添加
您还可以使用 引用 json 文件的根目录。
所以你可以将你的模板部分更改为这样
{{#.}}
<li>{{{name}}}, {{{age}}}</li>
{{/.}}
关于javascript - Grunt Mustache_render 无法正确渲染 HTML 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42789799/