Kendo UI - "Template Loader" - improved !

templateLoader.js

/**
This defines a Global object to serve loading external templates.
It handles multiple "Templates" (Or "Views") loading,
by operating on an array of JSON objects of type {path: "path to file", tag: "script's tag to attach to dom"}

This way-

you can load multiple templates, each with it's own tag so they can be referenced seperatly,

templates can be written in a much "cleaner" manner - as they are not wrapped by a "script" tag, IDE's will recognize the html.

A single event is raised after template loading has completed (loading & attach to DOM)

usage:

call "loadExtTemplates" on your array.

*/


var templatesLoader = (function($,host){

    /**
     * Name: rec_loadExtTemplates
     * Params:
     *   arr (JSON-Array): array of {path:"...", tag:".."}
     *   acc (string): accumulator
     *   
     * What do I Do ?
     *   Recursively traverse the JSON-Object array,
     *   for each object
     *    - try to "get" the template from path
     *    - if success
     *      - process a result (bound the result in <script> tag)
     *      - append result to accumulator
     *      - test if recursion end
     *         - true  - attach accumulator to "body" and trigger an event.
     *         - false - call recursively on smaller array.
     */
	var rec_loadExtTemplates = function(arr, acc) {
		var cur = $(arr).eq(0)[0];
		$.get(cur.path, function (result) { // On Success (done)
	    	result = "<script id=\"" + cur.tag + "\" type=\"text/x-kendo-template\">".concat(result).concat("</script>");
        	acc += result;
	    	
        	arr = $(arr).slice(1);
        	if(arr.length) {
        		rec_loadExtTemplates(arr, acc);
        	} else { // we're done
        		$("body").append(acc);
        		$(host).trigger("TEMPLATES_LOADED");
        	}
	    })
	    // Uncomment for debug:
	    /*
	    .done(function() {
	    	alert("SUCCESS");
	    })*/
	    .fail(function(err) {
	    	alert("AN ERROR OCCURED: \"" + cur.path + "\" returned with status of \"" + err.statusText + "\"");
	    });
	};
	
    /**
     * Name: loadExtTemplates
     * Params:
     *   templatesArray (JSON-Array): array of JSON-Object each with format: {path:"<path to template", tag:"<unique tag for template>"}
     *   
     * What do I Do ?
   	 *    Loads external template from path and injects in to page DOM
     *    Template will be injected in a <script type="text/x-kendo-template"> tag, and selected id value.
     *    browser does not run scripts with unknown types - thus it will not run this injected script !
     */
	return {
		loadExtTemplates: function (templatesArray) {
			rec_loadExtTemplates(templatesArray, "");
		}
	};    
		
})(jQuery, document);

When using this I am getting "Uncaught SyntaxError: Unexpected token < " but everything seems to load properly... Any ideas?

Turns out my template was bombing a JSON parse that I was executing on a AJAX response error handler. Fixed. Thanks for the Gist.

Thanks for the gist. Can you provide an example of the markup in the html file that would reference and pull the template?

Can you provide an example of the markup in the html file that would reference and pull the template?