Testing a Velocity template embedded inside of a <script type="text/template">

HTML

<script src="https://raw.github.com/vapour/jsVelocity/master/velocity.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>OMG</title>
    </head>
    <body>
        <div id="productList">
            nurrrrrdfgdfg
        </div>
        <script type="text/template" id="productTemplate">
<div class="product">
    <a href="#/product/${product.linkName}">
        <span class="name">Name: ${product.name}</span>
        <span class="price">Price:
        #if(${product.msrpSymbol} == "$")
        ${product.msrp}${product.msrpSymbol}
        #else
        ${product.msrpSymbol}${product.msrp}
        #end
        </span>
        #if(${product.shortDescription})
        <span class="desc">Description: ${product.shortDescription}</span>
        <span class="product-notes"><em>Included in every Package</em></span>
        #end
    </a>
</div>
        </script>
    </body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    text-align: inherit;
    text-decoration: inherit;
    color: inherit;
    background-color: transparent;
}
*:focus{
    outline: none;
}
html, body{
    height: 100%;
    width: 100%;
}

body{
    background-color: #000;
    background-image: url('http://kurzweil.com/img/bg.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    vertical-align: top;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    font-style: normal;
    font-family: helvetica, arial, sans-serif;
    text-align: left;
    text-decoration: none;
    color: #ccc;
}

#productList{
    padding: 72px;
}

.product a{
    display: block;
    padding: 1px 1px 0 1px;
    margin: 8px 0;
    background-color: #369;
}

.product a span{
    display: block;
    border-bottom: 1px solid #369;
    padding: 1px 8px;
    background-color: #036;
}

JavaScript

Template.define(
    'productTemplate',
    document.getElementById('productTemplate').innerHTML.split('\n')
);

var productData = [
    {
        msrpSymbol: '$',
        msrp: 10.99,
        name: 'Derp Cola',
        linkName: 'derp_cola',
        shortDescription: 'All the Herp that\'s fit to Derp'
    },
    {
        msrpSymbol: '$',
        msrp: 2.99,
        name: 'Nurrrr Soup',
        linkName: 'nurrrr_soup',
        shortDescription: 'Ever get one of those nurrrr moments?'
    },
    {
        msrpSymbol: '$',
        msrp: 7.77,
        name: 'Joisie Chowdah',
        linkName: 'joisie_chowdah',
        shortDescription: 'You. Don\'t. Even. Want. To. Know.'
    },
    {
        msrpSymbol: '$',
        msrp: '100',
        name: 'Cats',
        linkName: 'cats'
    }
];

var populateVelocityTemplateWithData = function(templateID, destinationID, data) {
    var i, output = [], item;
    console.dir(Template);
    if(data.length !== undefined){ //then it must be an array
        for(i = 0; i < data.length; i += 1){
            item = {product:data[i]};
            output.push(Template.render(templateID,item));
        }
    }
    $('#' + destinationID).html(output.join(''));
};

populateVelocityTemplateWithData('productTemplate', 'productList', productData);