Fun w/AJAX provided local storage and Handlebars

by deanpeters

HTML

<script src="http://zeptojs.com/zepto.js"></script>
<script src="http://www.mcclatchyinteractive.com/static/scripts/deferred.min.js"></script>
<script src="http://www.mcclatchyinteractive.com/static/scripts/mi.gap.prototype-extensions.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/master/dist/handlebars.js"></script>
<h1>start demo</h1>

<div id="output" class="output"><p>Bogus Test Data</p></div> 
<span id="list-section-template-parent">
<script id="list-section-template" type="text/x-handlebars-template">  

            {{!-- treat 1st image differently --}}
            {{#listRange this offset="0" limit="1"}}
            <div id="row0" class="row-fluid story-0"> 
                <div class="span6 col1">
                    <figure>
                        {{#ifArrayIsEmpty images this}}
                        <img src="{{placeholderImage}}" class="placeholder" alt="{{cleanarg defaultData.title}}"/>
                        {{else}}                                                         
                        <img src="{{array.0.url}}" alt="{{cleanarg array.0.summary}}" />
                        {{/ifArrayIsEmpty}}
                        <figcaption>
                            <a href="#{{anchor}}" ref="{{url}}" data-story-id="{{story_id}}" title="{{cleanarg title}}">{{decodeEntities title}}</a>
                        </figcaption>
                    </figure>
                    
                </div><!-- /.span6 .col1 -->
                <div class="span6 col2">
                    <p class="summary" style="display:none;">{{htmlText summary}}</p>
                    <p class="content">{{htmlText summary}}</p>
                </div><!-- /.span6 .col2 -->
            </div><!-- /#row0 .row-fluid -->
            {{/listRange}}                          

            {{!-- 2nd article to last (always odd # via the controller) --}}  
            {{#listRange this offset="1" limit="31"}}
            {{#on_even listRangeIndex}}
      ...

JavaScript

if (window.Zepto) {
    // https://github.com/madrobby/zepto/commit/1d5daef9f8abd9b92340c135bfbb11a7ce1a83a6
    Zepto.browser = {
        webkit: true
    };
    window.jQuery = Zepto; // get Bootstrap to work w/Zepto
    Deferred.installInto(Zepto);
    console.log("Zepto Deferred Plugin loaded");
}



(function(Handlebars){

  Handlebars.registerHelper('unless', function(context) {
    var args = arguments
    var options = args[args.length - 1]
    var fn = options.fn, inverse = options.inverse
    options.fn = inverse
    options.inverse = fn

    return Handlebars.helpers['if'].apply(this, args)
  })
 
    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('modulo', function (n, m, block) {
        if ((n % m) == 0) {
            return block.fn($.extend({}, {
                number: n
            }));
        } else {
            return block.inverse($.extend({}, {
                number: n
            }));
        }
    });
    
    
    Handlebars.registerHelper('add', function (value, addition) {
        return value + addition;
    });
    
    Handlebars.registerHelper('subtract', function (value, substraction) {
        return substraction - value;
    });
    
    Handlebars.registerHelper('encode', function (str) {
        return encodeURIComponent(str);
    });
    
    
    Handlebars.registerHelper('modulo', function (n, m, block) {
        if ((n % m) == 0) {
            return block.fn($.extend({}, {
                number: n
            }));
        } else {
            return block.inverse($.extend({}, {
                number: n
            }));
        }
    });
    
  ...