Playing around with Underscore.js templates

HTML

<script src="http://documentcloud.github.com/underscore/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}));

alert('ok');
var template = _.template("<b><%- value %></b>");
var s= template({value: '<script>&etwas'});
alert(s);