Question

我使用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>

我在这里做错了什么？

Answer 1

您的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>
    {{/.}}

Grunt mustache_render不会正确呈现HTML文件

1 个答案:

加成