Fun with Handlebars.js

Fun with Handlebars.js templateing

by deanpeters

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.min.js"></script>
						<!-- start: section list -->
						<span id="section-list-template-container">
						<script type="text/x-handlebars" id="section-list-template">
						<span id="firststorycontainer">  
						{{#listRange this offset="0" limit="1"}}
							<div id="row0" class="row-fluid">
								<div class="span4 firstSectionImage col1">
									<figure>
									<a href="{{url}}" title="{{title}}"><img src="{{image.url}}" alt="{{image.caption}}" /></a>
								   <figcaption>
									<a href="{{url}}" title="{{title}}">{{image.desc}}</a>
										</figcaption>
									</figure>
								</div><!-- /.span4 .firstSectionImage .col1 -->
								<div class="span8 col2">
									<h4><a href="{{url}}" title="{{title}}">{{title}}</a></h4>
									{{summary}}
								</div><!-- /.span8 .col2 -->
							</div><!-- /#row0 -->    
						{{/listRange}}
						</span><!-- /#firststorycontainer -->

						<span id="sectionlistcontainer"> 
						{{#listRange this offset="1" limit="31"}}
							{{#on_odd index}}
								{{! -- start a new row --}}
								<div id="row{{index}}" class="row-fluid">  
							{{/on_odd}}
	
			
								  <div class="span6 {{#modulo index 2}}col2{{else}}col1{{/modulo}} cropSectionImage">
									  <figure>
									<a href="{{url}}" title="{{title}}" class="flop"><img src="{{image.url}}" alt="{{image.caption}}" /></a>
									<figcaption><a href="{{url}}" title="{{title}}">{{image.desc}}</a>
									  </figcaption>
									  </figure>
								  </div><!-- /.span6 .{{#modulo index 2}}col2{{else}}col1{{/modulo}} -->

							{{#on_even index}}
								{{! -- end a new row...

CSS

figure{  
        float:left; /* important */  
        position:relative; /* important(so we can absolutely position the description div */  
    }  
    figcaption {  
        position:absolute; /* absolute position (so we can position it where we want)*/  
        bottom:0px; /* position will be on bottom */  
        left:0px;  
        width:100%;  
        /* styling bellow */  
        background-color:black;  
        font-family: 'tahoma';  
        font-size:15px;  
        color:white;  
        opacity:0.6; /* transparency */  
        filter:alpha(opacity=60); /* IE transparency */  
    }  
    figcaption a {  
        padding:10px; 
    color:#e8e8e8;
    font-weight: strong;
}

JavaScript

Handlebars.registerHelper('modulo', function(n, m, block) {
	if((n % m) == 0) {
		return block.fn($.extend({}, {number: n}));
	}
	else {
		return block.inverse($.extend({}, {number: n}));
	}
});
    

Handlebars.registerHelper('on_even', function(n, block) {
	if((n % 2) == 0) {
		return block.fn($.extend({}, {index: n}));
	}
});


Handlebars.registerHelper('on_odd', function(n, block) {
	if((n % 2)) {
		return block.fn($.extend({}, {index: n}));
	}
});

Handlebars.registerHelper('listRange', function(context, options) {
	var ret = "",
		  offset = parseInt(options.hash.offset) || 0,
		  limit = parseInt(options.hash.limit) || context.length;
            
		for(var j=(((limit + offset) < context.length) ? (limit + offset) : context.length),
				x = 0, i=((offset < context.length) ? offset : 0); i<j; i++, x++) {
			ret = ret + options.fn($.extend({}, context[i], { currentOffSet : i, listRangeIndex: x }));;
		}
		return ret;
});

(function($){
    if(!$.miGap){
        $.miGap = new Object();
    };
    
    $.miGap.renderSection = function(el, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;
        
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        
        // Add a reverse reference to the DOM object
        base.$el.data("miGap.renderSection", base);
        
        base.init = function(){
            base.options = $.extend({},$.miGap.renderSection.defaultOptions, options);
            
            // Put your initialization code here
            this.renderSectionEntries();
        };

		// methods 
         base.renderSectionEntries = function(){
            $.when(base.getJSONResults())
            .then( function(data) {
                entries = base.JSONResultsToObject(data);
    
                var hbTemplate = Handlebars.compile(base.$el.text());
                var hbHtml...