GILT & handlebars.js

This example page demonstrates how to use the Gilt API to get current sale items by category, and then use handlebars.js to translate the resulting json data into nice neat little card style objects. Any API that returns JSON data could be substituted in.

Get Started

Design your Divs

The Handlebars Template.

Handlebars.js uses pre-defined templates that look like regular html markup. The key differentiator is that you define these templates in a var in your main JS file that you load at the time of the page request. What's great about these templates is that if you have elements of your page that are dynamic and populated by API data, then you can quickly handle them in native JSON format and handle the look and feel all at once. Below is an example of what a handlebars template looks like. The parameter inside of the curly brackets is the JSON array key, which you want to get the value for. {{user.name}}

<div class="player_bio">
    <h1>{{player.name}}</h1>
    <div class="body">
    	{{player.bio}}
    </div>
</div>
Empty handlebars template.

Above: example wireframe of a div you might want to put on a web page.

Example of JSON populated handlebars template.

Above: same example of the wireframe div, now populated with data.

Call your data and parse

The Handlebars Functions

When you make the call for your json data, handlebars will then populate the expression elements of the template you created with actual data. So in the above step above, the previously empty shell now has content the user wants to see. Below, is an example of handlebars working where I have grabbed the top four men's sales items from Gilt and created a section of the page to display them in. My raw template looks like this and is populated with values from the json data I get back from Gilt.

var source = '<div class="pure-u-1-4">' +
'<div class="l-box">' +
'<div class="sales_entry">' +
'<a href="{{sale_url}}" title="{{name}}" target="_blank">' +
'<img src="{{link}}" alt="{{name}}"/>' +
'<h3>{{name}}</h3>' +
'</a>' +
'<p class="desc">' +
'{{description}}' +
'</p>' +
'</div>' +
'</div>' +
'</div>';

CURRENT GILT SALES EXAMPLE

You can fork handlebars.js on



Built with: Pure CSS, handlebars.js, Coda 2, and Gilt API's.