如何使用把手迭代嵌套對象

Question

我想知道如何使用車把遍歷以下數據對象。

它輸出的是：

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/

Answer 1

您的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/