возможно уже поздно и вы разобрались самостоятельно, но вот (используется jQuery)
- функция загрузки шаблона Handlebars из внешнего файла (*.hbs):

var getTempl = function (name) {
        if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
            $.ajax({
                url : 'app/templates/' + name + '.hbs',
                success : function(data) {
                    if (Handlebars.templates === undefined) {
                        Handlebars.templates = {};
                    }
                    Handlebars.templates[name] = Handlebars.compile(data);
                },
                async : false
            });
        }
        return Handlebars.templates[name];
    };

- функция загрузки json:

var loadData = function (dataUrl, callback) {
        var response;
        $.ajax({
            url: dataUrl,
            async: false
        }).done(function(data){
            if(isType('Function', callback)) {
                callback.call();
            }
            response = data;
        });
        return response;
    };

и все вместе превращается в :

var data = loadData(some/json-data/url),
      tmplOne = getTmpl('template-one')(data),
      tmplTwo = getTmpl('template-two')(data);

$('body').appned(tmplOne).append(tmplTwo);

про функцию isType() - абзац про класс объекта

(function(nqrsbd){
nqrsbd('.someClass').removeClass('someClass');
})(jQuery);

learn.javascript.ru/function-declaration-expression

я много не разбирался, но используйте html5shim - он исправит ситуацию с header и footer, старые браузеры их не понимают и отображают как хотят