附加 <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/