Zepto Deferred w/Handlebars for Phonegap

Zepto Deferred w/Handlebars for Phonegap

by deanpeters

HTML

<script src="http://beanerspace.com/mobi/deferred2.min.js"></script>
<script src="http://beanerspace.com/mobi/qunit.js"></script>
<script src="http://beanerspace.com/mobi/handlebars.min.js"></script>
<div id="thecontent">
    <p>Tomorrow, we hook object into handlebars driven element</p>
    
<h2>single page application</h2>

    
<h3>section front</h3>

    
<h3>individual stories</h3>

</div>

JavaScript

/* if zepto detected, then add deferred library */
if (window.Zepto) {
    Deferred.installInto(Zepto);
    console.log("Zepto Deferred Plugin loaded");
}

(function ($) {
    if (!$.nccfb) {
        $.nccfb = new Object();
    };

    $.nccfb.getFeed = 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("nccfb.getFeed", base);

        base.init = function () {
            base.options = $.extend({}, $.nccfb.getFeed.defaultOptions, options);
            // base.renderData();
        };


        /* this object is deferred
         * it means you don't get anything until it's done
         * 
         */
        base.getAjax = function (options) {
            var $deferred = $.Deferred(),
                args = $.extend({}, base.options, options);

            /* only execute when AJAX call is done */
            $.when(base.callAjax({
                "siteName": args.siteName
            }))
                .then(function (dataObj) {

                // let all other points of the app assume the first item of array is the object we want/need                 
                if ((dataObj instanceof Array) && (dataObj[0]) && (dataObj[0].query) && (dataObj[0].query.results) && (dataObj[0].query.results.item)) {
                    $deferred.resolveWith(self, dataObj);
                } else {
                    // not what we're looking for kids, throw an error
                    $deferred.rejectWith(self, dataObj);
                }
            }).fail(function (dataObj) {
                $deferred.rejectWith(self, dataObj);
            });
            /* a promise to do stuff when done */
            return $deferred.promise();
        }

        /*...