This is the script that inspired the talk "Beyond the Comp: A UI Developer's Toolset" I will be presenting on Aug 8t, 2013. It uses jQuery and Handlebars to allow me to design a UI in the browser with real or in this case faked data and then host it on Heroku with a small php hack. Right now I'm working on adding meteor js to the mix.

template.js

function template_config(header, header_data, body, body_data){
    Handlebars.getTemplate = function(name) {
        if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
            $.ajax({
                url : 'templates/' + name + '.handlebars',
                success : function(data) {
                    if (Handlebars.templates === undefined) {
                        Handlebars.templates = {};
                    }
                    Handlebars.templates[name] = Handlebars.compile(data);
                },
                async : false
            });
        }
        return Handlebars.templates[name];
    };
    
    var categoryBlock = Handlebars.getTemplate('categoryBlock');
    Handlebars.registerPartial('categoryBlock', categoryBlock);
    
    function render(template, data, region) {
        var deferred = $.Deferred();
        $.when($.get(data))
        .then(function(response, status) {
            if (status == "success") {
                var html = Handlebars.getTemplate(template)(response);
                $(region).html(html);
                deferred.resolve();
            } else {
                deferred.reject();
            }
        });
        return deferred;
    };

    var regions = [
        [header, header_data, '#navbar'],
        [body, body_data, '#main']
    ];

    var deferreds = [];

    for(var i = 0; i < regions.length; i++) {
        deferreds[i] = render.apply(this, regions[i]);
    }

    $.when.apply(this,deferreds).then(function(){
        console.log("I'm done loading");
        $("ul.tabs").tabs("> .pane");
         $(window).scroll(function(){
            //console.log('i scrolled');
            if(window.pageYOffset>580){
            $('#home-nav').addClass('__home-nav-fixed');
            }else{
               $('#home-nav').removeClass('__home-nav-fixed'); 
            }
        });
    });

}