JsRender Fundamentals - Module 1 - 3 Steps to JsRender

HTML

<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
<!-- BEGIN DEMO CONTENT -->
<ul id="musicList"></ul>


<script id="musicTemplate" type="text/x-jsrender">
    <li class="item" >
        <div>
            <h2>{{:model.brand}} {{:model.name}}</h2>
            <p>${{:pricing.salePrice}}</p>
            <div>
                <img src="{{:gallery.mainPhoto}}" style="height:80px;"/>
                <!-- <img src="{{:gallery['mainPhoto']}}"/> -->
            </div>
        </div>
    </li>
</script>

CSS

.item{
    padding: 10px;
    margin:10px;
}
img {
    padding: 10px 0px;
    height:80px;
}

JavaScript

var products = [
    {
    pricing: {
        salePrice: 1649.01
    },
    gallery: {
        mainPhoto: "http://johnpapa.net/files/downloads/images/Taylor/314ce.jpg"
    },
    model: {
        name: "314ce",
        brand: "Taylor"
    }},
{
    pricing: {
        salePrice: 4775.00
    },
    gallery: {
        mainPhoto: "http://johnpapa.net/files/downloads/images/Taylor/314ce.jpg"
    },
    model: {
        name: "814ce",
        brand: "Taylor"
    }},
{
    modelId: 4,
    pricing: {
        salePrice: 5899.00
    },
    gallery: {
        mainPhoto: "http://johnpapa.net/files/downloads/images/Taylor/314ce.jpg"
    },
    model: {
        name: "914ce",
        brand: "Taylor"
    }}];


$(function() {
    $("#musicList").html(
    $("#musicTemplate").render(products));
});