在遍历jquery对象时添加html

Question

Is there a better way of inserting somewhat complex html into a page other than the way I'm doing now? :

function display(friends) {
    $(".row").empty();

    $.each(friends, function(index, friend) {
        var html = '<div class="profileImage" style="float:left;padding:20px; width:200px">';
        html += '<a href="/app/click/' + friend.id + '">';
        html += '<img  id="' + friend.id + ' " src="https://graph.facebook.com/' + friend.id + '/picture?width=200&height=200 " />';
        html += '</a>';
        html += '</div>';
        $(".row").append(html);
    });

Currently I have a list of facebook friends which are styled nicely. When a user searches through the friends, the entire content block is emptied and the result is appended (i'm using autocomplete). However the design could change and get more complex so i'm looking for a scalable way of doing what I have above.

Instead of creating the html inside the javascript, is there a smarter way of doing this? Perhaps with $.load() and passing each friend as an argument? But that seems very slow and server intensive if you have to list 100 friends.

Answer 1

One good way to go would be to use a templating engine, handlebars (as mentioned in the prev answer) is one of them. You could create your own as well if your scenario is simple as this. And another key thing is not to use append inside the loop, instead construct them to a temp array and add it to the DOM in the end. If your list is big and appending to the dom in the array can be expensive.

Add the template html with a placeholder for friendId

<script type="text/html" id="template">
    <div class = "profileImage" style = "float:left;padding:20px; width:200px"> 
        <a href = "/app/click/{{friendId}}"> 
            <img id = "{{friendId}}" src = "https://graph.facebook.com/{{friendId}}/picture?width=200&height=200 " /> 
        </a>
        </div>
</script>

And

var $template = $('#template'),
    $row = $('.row');

function display(friends) {
    var rows = [];
    $.each(friends, function (index, friend) {
        var templateHtml = $template.text().replace(/{{friendId}}/g, friend.id);
        rows.push(templateHtml);
    });

    $row.html(rows); //Append them in the end
}

Demo

You could use $.map as well.

var $template = $('#template'),
    $row = $('.row');

function display(friends) {
     var rows = $.map(friends, function (friend) {
        var templateHtml = $template.text().replace(/{{friendId}}/g, friend.id);
        return templateHtml;
    });
    $row.html(rows);
}

Answer 2

A scalable solution would be to use a template engine and make the server returns JSON response. Take a look at Handlebars.js http://handlebarsjs.com/