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

下面是它的輸出：

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/

來源

2013-05-30 howtodothis

這不是有效的JSON。看起來你正在覆蓋數據。首先用單個元素數組創建一個「item」屬性，然後用2個元素的數組覆蓋「item」屬性。 –

我懷疑你將需要把你的破碎的JSON對象變成一個有效的JSON對象數組，每個對象都有一個'item'屬性。 –

您的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);

參見：

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/http://jsfiddle.net/75UzZ/1/

您也可以使您的數據對象對象的數組與item性能和迭代通過他們在for循環修復

來源

2013-05-31 00:22:50

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

回答

相關問題