从jQuery .append（）删除HTML

Question

我有一个Parse.com后端，并最终通过jQuery附加来渲染其数据，如下所示：

$(".albums").append(
    "<div class='col-xs-6 col-6 col-sm-3 col-lg-3'><div class='flip animated fadeInDown' style='-webkit-animation-delay:" + i * 0.1 + "s'><div class='card'><div class='album front' style='background-image:url(" + bigImg + ")'><img class='artwork' src='" + artwork + "' alt='" + collectionName + "' /></div><div class='album back' style='background-image:url(" + back + ")'><img class='artwork' src='" + back + "' alt='" + collectionName + "' /></div></div></div></div>");

这是一个for循环，因此需要各种HTML元素及其类。 我知道这是一种令人震惊，可耻的方式（而且我认为这会导致内存泄漏）。

我的问题是：如何从此append语句中删除尽可能多的HTML？ 我应该使用模板语言吗？

Answer 1

如果您认为可能要使用模板语言，则可以从构建自己的超级简单模板开始。

只需更换

"some string stuff " + someValue + " some more stuff"

// instead

var myTemplate = "some string stuff {someValue} some more stuff";
// now render
myTemplate.replace('{someValue}', someValue);

进一步进行操作很容易，并将其包装在一个函数中以“渲染”一个将对象作为参数并在键上进行迭代的“渲染”。 仔细完成后，将为您提供“现成”模板库提供的功能的子集，以便您以后可以随时切换。

这将允许您预定义“模板”并使用提供的数据输入进行渲染。 下一个问题是您想在哪里定义模板 。 通常，您会将其重新放置到设计人员可以访问的单独的独立文件中，也许在“模板”目录中。 但是然后您必须加载它。

如果您有很多模板，则某些库将允许您将它们打包在一起在一个文件中，加载文件，然后按名称向库要求特定的模板。 然后，您的设计人员将控制此文件以及随附的CSS。 如果您有很多，那么体系结构开销就变得有意义了。

是否要走这条路确实取决于您的具体情况和项目团队的结构。

Answer 2

我喜欢Handlebar这样的东西。

这将是模板

<script id="albumsTemplate" type="text/x-handlebars-template">
<div class='col-xs-6 col-6 col-sm-3 col-lg-3'>
        <div class='flip animated fadeInDown' style='-webkit-animation-delay:{{delay}}s'>
        <div class='card'>
            <div class='album front' style='background-image:url({{bigImg}})'>
                 <img class='artwork' src='" + artwork + "' alt='{{collectionName}}' />
            </div>
            <div class='album back' style='background-image:url({{back}})'>
                 <img class='artwork' src='" + back + "' alt='{{collectionName}}' />
            </div>
        </div>
    </div>
</div>
</script>

然后您可以像这样使用它：

var source   = $("#albumsTemplate").html();
var template = Handlebars.compile(source);
var html    = template({delay:i*0.1,
                        bigImg:bigImg,
                        collectionName:collectionName,
                        back:back});
$(".albums").append(html)

Answer 3

将html()添加到调用中即可。 这将返回.albums内部的html。 要获取包括.albums在内的所有.albums请执行$('.albums').append(...).parent().html() 。