0

我有一个 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？我应该使用模板语言吗？

4

3 回答 3

3

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

只需更换

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

// instead

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

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

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

如果您有很多模板，一些库会允许您将它们打包到一个文件中，加载文件，然后按名称向库询问特定模板。然后，您的设计人员将控制此文件和随之而来的 CSS。如果你有很多这样的东西，那么架构开销开始变得有意义。

你是否想走这条路真的取决于你的具体情况和项目团队的结构。

于 2013-11-04T17:20:32.863 回答
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)
于 2013-11-04T17:29:11.837 回答
0

添加html()到通话中应该可以做到。这将返回 .html 中的 html .albums。得到包括.albums你在内的一切$('.albums').append(...).parent().html()。

于 2013-11-04T17:15:49.147 回答