Underscore.js templates & ex.

by gavinfoley

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<table class="outer">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>


<div class="outer">

    <div class="th">Id</div>
    <div class="th">Name</div>
    
    <p>&nbsp;</p>
    
</div>


<script type="text/html" id='table-data'>
    
    <% _.each(items,function(item,key,list){ %>
        <tr>
            <td><%= key %></td>
            <td><%= item.name %></td>
        </tr>
    <% }) %>

</script>
        
<script type="text/html" id='div-data'>
    
    <% _.each(items,function(item,key,list){ %>
        <div><%= key %></div>
        <div><%= item.name %></div>
    <% }) %>

</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"},
    {name:"Shawn"},
    {name:"Justin"},
    {name:"Scott"},
    {name:"John"},
    {name:"Sherell"},
    {name:"Janie"},
    {name:"Graham"},
    {name:"Erica"}
]
    
var tableTemplate = $("#table-data").html(),
    divTemplate = $("#div-data").html();

$("table.outer tbody").html(_.template(tableTemplate,{items:items}));
$("div.outer p").before(_.template(divTemplate,{items:items}));



var tuts = [{ Name: "Gavin", Job : 'Web Development'}, { Name: "Kirsi", Job : 'Teacher'}];

var defaults = { 
    Job : 'Unemployed', 
    niche: 'N/A'
};
 
//_.defaults(tuts, defaults);
//_(tuts).defaults(defaults);

_.select(tuts, function(item){ 
    _(item).defaults(defaults);    
});
 
console.log(tuts);


// Collecting all unique affected app version for a given data set
var jsonStats = [
  {app_versions: ['1.2','1.2.3']},
  {app_versions: null},
  {app_versions: ['1.2','1.3']}
];
var app_versions = _.uniq(_.flatten(_.compact(_.map(jsonStats, function(day){return day.app_versions }))));
// ["1.2", "1.2.3", "1.3"]
 
// Bye bye stupid for loops!
_.each(app_versions, function(av){ console.log(av); })
 
// Sum up everything
//_.reduce(data.total_errors_spline, function(a,b) { return a+b });
 
// Select only the days that the app versions 1.2 is affected
var dayStats =_.select(jsonStats, function(day){ return _.any(day.app_versions,function(av){ return av==='1.2' }) })
 
// And you can even display them!
var temp = _.template("These versions are affected on day 1: <%= ds[0].app_versions.join(', ') %>")({ds: dayStats });
console.log(temp);
// "These versions are affected on day 1: 1.2, 1.2.3"