External Template Loader for Kendo UI

templateLoader.js

var templateLoader = (function($,host){
	//Loads external templates from path and injects in to page DOM
	return{
		loadExtTemplate: function(path){
			var tmplLoader = $.get(path)
				.success(function(result){
					//Add templates to DOM
					$("body").append(result);
				})
				.error(function(result){
					alert("Error Loading Templates -- TODO: Better Error Handling");
				})
				
			tmplLoader.complete(function(){
				$(host).trigger("TEMPLATE_LOADED", [path]);
			});
		}
	};
})(jQuery, document);

This was nice to begin with, but is not practical for situations where you have separated your template ("Views") into several files.

• should accept an "array" of templates
• event should be triggered only after all templates were loaded
• templates should have their own "Name" to reference easily
• the function will not depend on the template to have the "script" tag, rather user will write a clean template (better editable by IDE's)

Also, it uses a deprecated jQuery calls which are to be removed at some point...

I've re-written a function to address this issues at https://gist.github.com/amirgalor/8705653

it accepts a "JSON" array of {path: "path to file", tag: "script's tag to attach to dom"}

Thanks @amirgalor,

I also improved your version:

• use TypeScript
• taking advantage of the fetch API
• taking advantage of the ...rest parameter syntax
• added some usage examples
• it's now a class instead of a function
• removed jQuery dependency
• returns a promise instead of triggering an event

Gist: https://gist.github.com/gabsoftware/616dca27dccdd4e3fb4c0480cb1b0b88

Usage:

import { TemplateLoader } from "path/to/TemplateLoader.js";

// first way
var p = TemplateLoader.loadTemplates(
    { path: "/templates/first.tmpl.htm" , tag: "first-template"  },
    { path: "/templates/second.tmpl.htm", tag: "second-template" }
);

// or second way
var tmplArr = [ { path: "/templates/first.tmpl.htm" , tag: "first-template"  },
                { path: "/templates/second.tmpl.htm", tag: "second-template" } ];
var p = TemplateLoader.loadTemplates( ...tmplArr );

// then use the promise
p.then(
    templates => {
        console.log( 'Templates loaded', templates );
        
        var firstTemplate = kendo.template( $( "#first-template" ).html(), { useWithBlock: false } );
        var result = firstTemplate();
        $( "#firstcontainer" ).html( result );

        var secondTemplate = kendo.template( $( "#second-template" ).html(), { useWithBlock: false } );
        var result2 = secondTemplate();
        $( "#second" ).html( result2 );
    }
);

@dtrimarchi : no need for events with my implementation, you can use the returned promise as you wish.