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元素及其类。我知道这是一个令人震惊，可耻的方式（我相信这会导致内存泄漏）。

我的问题是：如何从此附加语句中删除尽可能多的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').append(...).parent().html()。

从jQuery中移除HTML .append（）

3 个答案: