从jQuery .append()中删除.append

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

我喜欢车把做这种事。

这将是模板

<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()。