jsrender guitars

guitars example jsrender

by Mel Milner

HTML

<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<h3>without a template </h3>
<div id="output1"></div>

<h3>with a template </h3>
<div id="output2"></div>




<script id="myTmpl" type="text/x-jsrender">
<div>
    <div>{{:#index+1}}: {{:model.brand}} {{:model.name}}</div>
    <div>${{:pricing.salePrice}}</div>
    <img src="{{:gallery.mainPhoto}}" style="height:80px;"/>
</div>
</script>

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"
                }
            }];



//With a JsRender template
$('#output2').html( $('#myTmpl').render(products) );



// No template
var i = 1;
$(products).each(function() {
    var product = this;
    $("#output1").append("<div>" 
                         + i++ 
                         + ": " 
                         + product.model.brand 
                         + " " 
                         + product.model.name 
                         + "</div>" 
                         + "<div> $" 
                         + product.pricing.salePrice 
                         + "</div>" 
                         + "<img src='" 
                         + product.gallery.mainPhoto 
                         + "' style='height:80px;'/>");
});