javascript - 在 HandlebarsJS 中显示多个数组

Question

我是第一次玩 HandlebarsJS，我希望在其中使用多个数组。这可能吗？

我已经设置了一个 Codepen 模板，但我正在努力实现来自 2 个数组和外部 URL 的数据。我也用 MustacheJS 试过这个，但我相信它只允许一个数组并且没有过滤——不像 Handlebars

这是 external JSON和 CodePen

<!-- REQUIRED - Display site name, url and title in top section. With product data below using the "other array-->
<script id="myTemplate" type="text/x-handlebars-template">
{{content}}
</script>

<div id="contentArea"></div>

<script>
var data     = {"content": "Hello, World!"};
var source   = $("#myTemplate").html();
var template = Handlebars.compile(source);
var html     = template(data);
$("#contentArea").text(html);
</script>

这里是 my first template attempt但目前无法集成 JSON 数组

Answer 1

可以使用 {{#each}} block 助手。我还注册了我自己的助手 {{{s}}}，它只是返回它的参数 JSON.stringify()'ied，所以我可以打印这些数组。如何获取它们是另一个问题，为了简单起见，我将它们复制 & 粘贴 到代码的 Javascript 部分。另外，这里是 JS fiddle :

var data = {"content": "Hello, World!", "multipleArrays": [
  [
    {
      "productimage": "https://c.static-nike.com/a/images/t_PDP_864_v1/f_auto/i0lfddlghaiwfqlvlqay/air-vortex-shoe-fmq6pS.jpg",
      "producturl": "https://www.nike.com/gb/t/air-vortex-shoe-fmq6pS"
    },
    {
      "productimage": "https://c.static-nike.com/a/images/t_PDP_864_v1/f_auto/cmuof8adhfipkvd0f43r/air-max-95-shoe-XPTbV2mM.jpg",
      "producturl": "https://www.nike.com/gb/t/air-max-95-shoe-XPTbV2mM"
    }
  ],
  [
    {
      "sitename": "Nike",
      "sitetitle": "Nike. Just Do It.. Nike.com",
      "siteurl": "https://www.nike.com/gb/en_gb/"
    }
  ]
]};

Handlebars.registerHelper('s', function(arg) {
  return JSON.stringify(arg);
})
var source = $("#myTemplate").html();
var template = Handlebars.compile(source);
var html = template(data);
$("#contentArea").html(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<!-- REQUIRED - Display site name, url and title in top section. With product data below using the "other array-->
<script id="myTemplate" type="text/x-handlebars-template">
  <h1>Content: {{content}}</h1>
  <hr>
    
  <h2>Stringified multiple arrays:</h2> 
  {{{s multipleArrays}}}
  <hr>
    
  {{#each multipleArrays}}
   <h2>Item {{@index}}</h2>
  {{{s this}}}
  <br>
  <br>
  {{/each}}
  
  
</script>

<div id="contentArea">
</div>