使用 jquery 的 forEach 和 templatePlugin 附加 <div>答案

【问题标题】：Append <div> using jquery's forEach and templatePlugin使用 jquery 的 forEach 和 templatePlugin 附加 <div>
【发布时间】：2015-08-18 13:34:04
【问题描述】：

我为以下问题苦苦挣扎了几个小时：

使用 jquery 的 forEach 方法遍历对象
对于每个对象元素，都应使用一个模板，该模板也填充模板中的信息。我正在使用的插件：jquery-tempalte
对于每个对象，模板应附加到<div>

不幸的是，只有最后一个对象元素被可视化并加载到 DOM。在之前的步骤中创建的所有其他 div 都被覆盖。

在这里找到一个 jsFiddle，它演示了我的问题：http://jsfiddle.net/7oq053od/1/

你知道我错过了什么吗？
很高兴能得到一些反馈:)

【问题讨论】：

标签： javascript jquery foreach jquery-templates

【解决方案1】：

从 github 网页上的Options 部分，您可以看到将append 属性设置为true 的第三个参数。只需考虑像这样将其添加到您的脚本中：

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

这是一个工作 JsFiddle。

【讨论】：

哇...这很容易。我什至看过文档，但显然我错过了它。谢谢！

【解决方案2】：

用于附加多个 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>

【讨论】：

【解决方案3】：

模板插件似乎将模板值应用于同一元素。如果你克隆元素，你的脚本就可以工作。

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

查看更新的小提琴here

【讨论】：

【解决方案4】：

问题是loadTemplate 函数覆盖了div。您可以通过克隆模板容器然后将其附加到“#homeWiew”来解决此问题。

我从你的 jsfiddle 创建了一个对我有用的分支：

http://jsfiddle.net/6ksdnejw/

【讨论】：