doT.js sample

by sapegin

HTML

<script src="http://olado.github.com/doT/doT.min.js"></script>
<div id="container"></div>

<script type="text/plain" id="tmpl_photo">
    <div class="sh-photo jstree-draggable" data-id="{{=it.id}}">
        <img src="{{=it.image}}" width="{{=it.width}}" height="{{=it.height}}" alt="{{=it.title}}">
    </div>
</script>

JavaScript

var photos = [
    {id: 1, image: 'http://decisivemoment.ru/thumbs/Saluki/2012-01-08_5D_7592_Artem_Sapegin.jpg', title: 'Photo 1', width: 98, height: 150},
    {id: 1, image: 'http://decisivemoment.ru/thumbs/Saluki/2012-05-19_5D_9670_Artem_Sapegin.jpg', title: 'Photo 2', width: 98, height: 150}
];

// Standard usage
//var tmpl = doT.template($('#tmpl_photo').text());
//$('#container').html(tmpl(photos[0]));


// jQuery plugin
$.fn.tmpl = function(tmplId, data) {
    var tmpl = doT.template($('#tmpl_' + tmplId).html());
    if (!$.isArray(data)) data = [data];

    return this.each(function() {
        var html = '';
        for (var itemIdx = 0; itemIdx < data.length; itemIdx++) {
            html += tmpl(data[itemIdx]);
        }
        $(this).html(html);
    });
};

$('#container').tmpl('photo', photos);