Handlebars Test

by AaronLayton

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script id="listing-product-1" type="text/x-handlebars-template">
    {{#each products}}
    <div class="listing-product-1">
        <div class="mainInfo listStyle">
            <a href="{{productUrl}}">
                <img src="{{firstInArray images}}" alt="{{title}}"/>
            </a>
            <div class="productMeta">
                <h2>
                    <a href="{{productUrl}}">
                        {{title}}
                    </a>
                </h2>
                <div class="nowPrice">&pound;{{price}}</div>
            </div>
            <a class="quickBuy listingButton" href="#QuickBuy">Quick Buy</a>
        </div>
        <div class="altInfo listStyle">
            <div class="title">{{title}}</div>
            {{description}}
            
            <ul class="features">
                {{{listItems features}}}
            </ul>
            
            <div class="quickBuyDiv">
                <select class="quickBuyOptions"><option value="">Size</option>
                    <option value="90383">16</option>
                    <option value="90384">18</option>
                    <option value="90385">20</option>
                    <option value="90386">22</option>
                    <option value="90387">24</option>
                    <option value="90388">26-28</option>
                    <option value="90466">30-32</option>
                </select>
                <a class="addToBag listingButton" href="#QuickBuy">Add »</a>
                <a class="catwalk colorbox listingButton" href="{{catwalkUrl}}">View Catwalk</a>
            </div>
            
        </div>
    </div>
    {{/each}}
</script>

<div id="listing-container">
    
</div>

CSS

body { background:#f5f5f5;padding:50px; }

#listing-container {
    margin:0 auto;
	width:788px;
}
.listing-product-1 {
    float:left;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    height: 379px;
    margin:0 5px 10px;
    position:relative;
    text-align:center;    
    width:187px;

    -webkit-perspective: 600px;
    -moz-perspective: 600px;

}

.listing-product-1 .listStyle {
	background:#fff;
    padding:10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    height: 359px;
    left:0;
    position:absolute;
    top:0;
    width:167px;
    
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}


.listing-product-1 .mainInfo {
    z-index:2;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
}
.listing-product-1 .altInfo { 
    z-index:1;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}

.listing-product-1.showAlt .mainInfo { 
    z-index:1;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}
.listing-product-1.showAlt .altInfo { 
    z-index:2;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
}


.listing-product-1 h2 {
	height:30px;
}
.listing-product-1 h2 a {
	color:#1c1c1c;
    font-weight:normal;
    text-decoration:none;
}
.listing-product-1 .nowPrice {
    color:#444;
    font-size: 20px;
	text-transform: uppercase;
}
.listing-product-1 .productMeta {
    margin:15px 0;
}

.listing-product-1 .title {
    color:#444;
    font-size:14px;
    font-weight:bold;
    margin:15px 0;
}

.listing-product-1 .features {
    list-style: disc;
    text-align: left;
    margin: 20px 0 20px 20px;
   ...

JavaScript

// Define a JSON with the products details in it
var Product = {
  productID:"16676",
  title:"Black & red bow print balconette bra",
  price:"16.00",
  description:"Plus Size Black & red bow print balconette bra. Underwired and Moulded cup to enhance your cleavage!", 
  images: [
    "http://bit.ly/104z2V1",
    "http://bit.ly/UUC5x7"
    ],
  productUrl:"http://bit.ly/Scs1Ta",
  reference:"19835",
  features:[
  	"Main: 95% Polyamide 5% Elastane",
    "Wing: 85% Polyamide 15% Elastane",
    "Cup Lining: 100% Polyester",
    "Inter lining 100% Polymide",
    "Excluding Trims",
    "Machine washable"
  ],
  popupUrl:"http://bit.ly/VuDOfy",
  review: 4.5,
  catwalkUrl:"http://bit.ly/VNYHDk"
}

var AllProducts = [];

for (var i = 0; i < 10; i++){
  var localProduct = $.extend({},Product);
  var listTemplate = "list" + Math.floor(Math.random()*11);
  localProduct.template = listTemplate;
  AllProducts.push(localProduct);
}

Handlebars.registerHelper('firstInArray', function(item) {
  return item[0];
});

Handlebars.registerHelper('listItems', function(items) {
  var returnVal = $.map(items, function(n, i){
      return ("<li>" + n + "</li>");
  });
  return returnVal.join("");
});

var jsonOutput = {
    products: AllProducts  
};

var productTemplate = $('#listing-product-1').html();
var template = Handlebars.compile(productTemplate);
var outputHtml = template(jsonOutput);


$('#listing-container').html(outputHtml);



$('#listing-container')
    .on('click', '.quickBuy', function(){
        $('.listing-product-1').removeClass('showAlt');
        $(this).parents('.listing-product-1').addClass('showAlt');
    })
    .on('click', '.addToBag', function(){
        $('.listing-product-1').removeClass('showAlt');
    });