emberjs external template loader with callback

emberjs_template_loader.js

function loadTemplates(templates, callback) {
    var _loadCount = 0;
    $('body').bind('templates_loaded', callback);
    
    if(templates.length === 0){
        $('body').trigger('templates_loaded');
    }else{
        $(templates).each(function(i, el) {
            var _tpl = $('<script>');
            _tpl.attr('type', 'text/x-handlebars');
            var _tplName = this.substring(0, this.indexOf('.'));
            _tpl.attr('data-template-name', _tplName);
            console.info('loading '+el);
            $.ajax({
                async: false,
                type: 'GET',
                url: 'templates/' + el,
                success: function(resp) {
                    _tpl.html(resp);
                    $('body').append(_tpl);
                    $(function() {
                        _loadCount++;
                        if (_loadCount === templates.length) {
                            $('body').trigger('templates_loaded');
                            console.info('templates_loaded triggered ');
                        }
                    });
                }
            });
        });
    }
}

//Example:
loadTemplates(['index.html', 'todos.html'], function() {
    // Your emberjs application initialization
    
    App = Ember.Application.create();

    App.Router.map(function() {
        // put your routes here
    });

    App.IndexRoute = Ember.Route.extend({
        model: function() {
            return ['red', 'yellow', 'blue'];
        }
    });
});