附加 <div> 使用jQuery的forEach和templatePlugin

Question

我因以下問題而奮斗了幾個小時：

1. 使用jquery的forEach方法遍歷對象
2. 對於每個對象元素，應使用模板，該模板還將信息填充在模板中。 我正在使用的插件： jquery-tempalte
3. 對於每個對象，模板應附加到<div>

不幸的是，只有最后一個對象元素才可視化並加載到DOM。 在之前的步驟中創建的所有其他div被覆蓋。

在這里找到一個演示我問題的jsFiddle： http : //jsfiddle.net/7oq053od/1/

您有什么想法，我想念的是什么？
希望能得到一些反饋意見:)

Answer 1

用於附加多個div。 您應該創建一個包含所有子div的主容器，並且在顯示時，每個div元素都會被創建並每次都附加到主容器中。 這是一個示例代碼：

<div id="container"></div> 

//now in javascript create child div elements and append to main container
<script>

for(var items in data)
{
  var newChild = $(document.createElement('div'));  
    $(newChild).css({
    //some css code
    });
 //now appending it to main container
$('#container').append(newChild);
}

</script>

Answer 2

似乎模板插件將模板化的值應用於相同的元素。 如果克隆元素，則腳本將起作用。

$.each(results.features, function (key, value) {
    $("#homeView").clone().loadTemplate($("#template"), {
        geoFenceName: value.attributes.title,
        geoFenceDescription: value.attributes.description
    }).appendTo('#fences');
});

在這里查看更新的小提琴

Answer 3

在github頁面的Options部分中，您可以看到第三個參數，其append屬性設置為true 。 只需考慮將其添加到您的腳本中，如下所示：

$.each(results.features, function (key, value) {
    $("#homeView").loadTemplate($("#template"), {
        geoFenceName: value.attributes.title,
        geoFenceDescription: value.attributes.description
    }, {append: true});
});

這是工作中的 JsFiddle 。

Answer 4

問題是loadTemplate函數會覆蓋div。 您可以通過克隆模板容器，然后將其附加到“ #homeWiew”來解決此問題。

我從您的jsfiddle創建了一個對我有用的叉子：

http://jsfiddle.net/6ksdnejw/