Skip to content

Instantly share code, notes, and snippets.

Forked from amirgalor/templateLoader.js
Last active February 18, 2021 18:27
Show Gist options
  • Save gabsoftware/616dca27dccdd4e3fb4c0480cb1b0b88 to your computer and use it in GitHub Desktop.
Save gabsoftware/616dca27dccdd4e3fb4c0480cb1b0b88 to your computer and use it in GitHub Desktop.
Kendo UI - "Template Loader" - improved and in TypeScript !
This defines a class that can load external templates.
It handles multiple "Templates" (Or "Views") loading,
by operating on an array of JSON objects of type {url: "url to file", id: "id of the 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 promise will be resolved after template loading has completed (loading & attaching to DOM)
Call "TemplateLoader.loadTemplates" on your array, then use the returned promise.
The promise data is an updated array of TemplateObj where the html property is set to the content of the template
Usage example:
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
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 );
// this interface will enforce the type of the objects passed in the Array
interface TemplateObj {
url: string;
id: string;
html?: string;
class TemplateLoader {
* Name: loadTemplates
* Params:
* templatesArray: ...array of JSON-Object or JSON objects between parenthesis, each
* with format: {url:"<url to template", id:"<unique id for template script tag>"}
* 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 !
public static async loadTemplates ( ...templatesArray: TemplateObj[] ) {
try {
var templates = await Promise.all(
tmpl => fetch( tmpl.url ).then(
response => response.text()
template => tmpl.html = '<script id="' + + '" type="text/x-kendo-template">' + template + "</script>"
document.body.insertAdjacentHTML( "beforeend", templates.join( "\n" ) )
return templatesArray;
} catch (error) {
console.log( error );
throw( error );
export { TemplateLoader, TemplateObj };
Copy link

ghost commented Feb 18, 2020

Please update with a working example with complied Typescript, I have tried to make this work but not been successful at all.

Copy link

I would love a working example, too!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment