Playing around with Underscore.js templates

by erichbschulz

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

CSS

.outer {
    border-collapse: collapse;
    font: 12px/16px arial, sans-serif;
    margin: 20px;
    padding: 0;
}
div.outer {
    border-top: solid 1px #ddd;
    border-left: solid 1px #ddd;
}
div.outer p {
    clear: left;
}
.outer td, .outer th {
    border: solid 1px #ddd;
    margin: 0;
    padding: 5px;
}
.outer div {
    border-right: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    float: left;
    margin: 0;
    padding: 5px;
}
.outer th, .outer div.th {
    background: #eee;
    font-weight: bold;
}
.outer div:nth-child(odd) {
    width: 20px;
}
.outer div:nth-child(even) {
    width: 50px;
}
.outer div:nth-child(2n+1) {
    clear: left;
}

JavaScript

var items = [{
    name: "Nick"
}, {
    name: "Lee"
}, {
    name: "Jenny"
}, {
    name: "Julie"
}, {
    name: "Dennis"
}];
items = [{"id":28,"Title":"Sweden"}, {"id":56,"Title":"USA"}, {"id":89,"Title":"England"}];


var out = '';
//out += 'hello world';

var cols = _.keys(items[0]);

var thTemplate = "<tr><% _.each(col, function(name) { %> <th><%= name %></th> <% }); %></tr>";


//<% print('<%_ ' + epithet +' %>'); %>

var tdTemplate = "<tr><% _.each(col, function(name) { print('<XX ' + name +' %>');  }); %></tr>";



out += "th==========" + _.template(thTemplate, {
    col: cols
});
out += "atd==========" +_.template(tdTemplate, {
    col: cols
});
//out += 'hello world';

$('body').append(_.escape(out));

//$('body').prepend(_.escape(_.escape(tdTemplate)));