Skip to content
Branch: master
Go to file

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time

tmpl.loader: Simple Template Loading and Rendering

Version 0.2

Loads external template files and renders them with a template engine in JavaScript.


Allows templates to be broken out into seperate files.

Supports multiple template engines side-by-side on a single page.

Works with jQuery... or not. Your choice.

Notifies your javascript code when templates have loaded with the ready() callbacks.

Supported Templating Engines

  • jsRender
  • jSmart
  • Handlebars
  • Mustache
  • Plates
  • IST
  • doT
  • More to come...!

How To Use

  1. Add your template file as a link:
<link rel="template/jsrender" type="text/html" href="mytemplate.tmpl.html" />

Note that the name of the template is automatically extracted from the file name.

  1. In JavaScript, add a ready callback.
//set a callback so that you can do something with the templates once they are loaded.
tmplLoader.ready(function() {
	//now we're ready to start rendering with the template.
	//just call tmplLoader.render() and pass the template name and a model to bind with.
	var content = tmplLoader.render('mytemplate', { message: "whatever" });
	//let's have it pop up on the screen.
	alert('rendered content: '+content);		

Fancy Stuff

You can register a built-in template engine with a custom alias I.E. rel="template/custom-alias":

//jsrender by default uses "jsrender" and is configured automatically.

You can also register a completely custom template engine:

//register a custom engine:
tmplLoader.engines.register('engine-name', {
	//code to register the template with some sort of collection.
	register: function(name, data) {
	//code to render the template given some set of data input.
	render: function(name, data) {
	//code to reset the template collection for the engine.
	reset: function() {

If you want to have multiple templates in a single large file (production scenarios possibly), you can do the following:

  1. Create your template file with comments indicating the sections:
<!-- template section1 -->
template section 1
<!-- template section2 -->
template section 2
  1. Add your template with "-multipart" at the end of the REL attribute:
<link rel="template/jsrender-multipart" type="text/html" href="mytemplate_multi.tmpl.html" />
  1. Reference the templates as "file name"_"part name":
tmplLoader.render('mytemplate_multi_section1', { data: "foo" });

Future Releases

Add more templating engines.

Add unit testing to repo.


Loads external html template files into javascript and renders them using a template engine of your choice.



You can’t perform that action at this time.