javascript - 如何从车把助手返回对象或 json 数据到 html

Question

这是我在 html 布局中的车把块：

{{json language}}

这是我的主要 build.js 中的车把助手：

  handlebars.registerHelper('json', function(language) {
    var data = {
      "marathi" : "m",
      "hindi" : "h",
      "english" : "e"
    }
    return ??
  }); 

如何将“数据”返回到上面相同的 html 布局？它可以放在 html 中的任何位置。“语言”来自 markdown 文件中的 yaml frontmatter。如果可能的话，我想根据“语言”的值循环一个特定的 json。

谢谢！

Answer 1

这是一个示例（jsfiddle）：

// In your HTML page:
// <script id="my-template" type="text/x-handlebars-template">{{json date}}</script>
// <output></output>

// Define the helper
Handlebars.registerHelper('json', function(context, options) {
  return JSON.stringify(context, null, 2);
});

// Usage
var source = document.querySelector("#my-template").innerHTML;
var template = Handlebars.compile(source);
var html = template({
  title: 'Lorem Ipsum Dolor',
  date: {month: 'January', day: 13, year: 2012}
});

document.querySelector('output').innerHTML += '<pre>'+ html +'</pre>';