如何使用Handlebars迭代嵌套对象

How to iterate over nested objects using Handlebars

本文关键字：嵌套 对象 迭代 Handlebars 何使用      更新时间：2023-09-26

我想知道如何使用手把对以下数据对象进行迭代。

以下是它的输出：

image2.png | title2 
image3.png | title3

我想实现的目标：

image1.png | title1
image2.png | title2 
image3.png | title3

数据

var data = {
  "item": [{ // item with one image
      "src" : "image1.png",
      "title" : "title1"
  }],
  "item": [{ // item with two or more images
      "src" : "image2.png",
      "title" : "title2"
  },
  {
      "src" : "image3.png",
      "title" : "title3"
  }]
}
var template = Handlebars.compile($("#data-template").text());
var html = template(data);
$('#placeholder').html(html);

模板

<div id="placeholder"></div>
<script type="text/x-handlebars" id="data-template">
    {{#item}}
       {{src}} | {{title}} <br>
    {{/item}}
</script>

http://jsfiddle.net/88CwB/

您的JSON无效。

扶手只能看到2个项目。

var data = {
  "item": [{ // item with one image
      "src" : "image1.png",
      "title" : "title1"
  }],
  "item": [{ // item with two or more images
      "src" : "image2.png",
      "title" : "title2"
  },
  {
      "src" : "image3.png",
      "title" : "title3"
  }]
}

var template = Handlebars.compile($("#data-template").text());
var html = template(data);
$('#placeholder').html("<p>" + data.item + "</p>");

请参阅：http://jsfiddle.net/hZQnD/1/

您可以通过使data对象仅包含1个item对象来修复它，该对象可能包含3个项的数组。

var data = {
  "item": [{ // item with 3 images
      "src" : "image1.png",
      "title" : "title1"
  },
  {
      "src" : "image2.png",
      "title" : "title2"
  },
  {
      "src" : "image3.png",
      "title" : "title3"
  }]
}

var template = Handlebars.compile($("#data-template").text());
var html = template(data);
$('#placeholder').html(html);

请参阅：http://jsfiddle.net/75UzZ/1/

您还可以通过将数据对象设置为具有item属性的对象数组，并在for循环中对其进行迭代来修复它：

var data = [{
    "item": [{ // item with one image
        "src" : "image1.png",
        "title" : "title1"
    }]
  },{
    "item": [{ // item with two or more images
        "src" : "image2.png",
        "title" : "title2"
    },
    {
        "src" : "image3.png",
        "title" : "title3"
    }]
}];
var template = Handlebars.compile($("#data-template").text());
var html = ""
for( var i = 0; i < data.length; ++i ){
  html += template(data[i]);
}
$('#placeholder').html(html);

请参阅：http://jsfiddle.net/dFmQG/2/

相关文章：