从jQuery .append（）删除HTML

Question

I have a Parse.com backend and am rendering its data, ultimately, with a jQuery append, like this:

$(".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>");

It's a for loop hence the need for the various HTML elements and their classes. I know it's an appalling, shameful way to do it (and I believe it's causing a memory leak).

My questions are: How can I remove as much of the HTML from this append statement as possible? Should I be using a templating language?

Answer 1

If you think you might want to use a templating language you can start by building your own, super simple, template.

Simply replace

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

// instead

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

It's easy to go further, and wrap this in a function to "render" that takes an object as an argument and iterates over keys. Done carefully this will provide you a subset of the functionality provided by "off-the-shelf" templating libraries so you can always cut-over later.

This will allow you to predefine your "template" and render using the data input provided. The next question is where do you want to define your template . Generally you would relocate it to a separate free-standing file that the designers would have access to, perhaps in a "templates" directory. But then you have to load it.

If you have lots of templates, some libraries would allow you to pack them together in one file, load the file, then ask the library for a specific template by name. Your designers would then control this file and the CSS that goes with it. If you have a lot of this, then the architectural overhead starts to make sense.

Whether you want to go down that road really depends on your specific circumstances and the structure of your project team.

Answer 2

I like Handlebar for this sort of thing.

This would be the template

<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>

And then you would use it like this:

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

Adding html() to the call should do it. That'll return the html inside of .albums . To get everything including .albums you do $('.albums').append(...).parent().html() .