Simple template engine

gistfile1.js

/* Templates to load: */

function Template(templateUrl) {
	this.template = false;
	this.compiledTemplate= false;
	this.templateUrl = templateUrl;
	this.draw = function(contents) {
		//We compile the template if it isn't compiled yet.
		this.compiledTemplate = this.compiledTemplate || Handlebars.compile(this.template);
		return this.compiledTemplate(contents);
	};
	this.fetchTemplate = function(callback) {
		var deferred = $.Deferred();
		var that = this;
		if(!this.template) {
		$.ajax(this.templateUrl).success(function(c) {
			that.template = c;
			deferred.resolve(that);
		}).error(function(c) {
			deferred.reject(that.templateUrl);
		});
		}else{
			deferred.resolve(that);
		}

		return deferred;
	};
}


var Templates = {
	templateFolder: "templates/",
	templates: {},
	add: function(name, url) {
		this.templates[name] = new Template(this.templateFolder+url);
	},
	draw: function(name, content) {
		return this.templates[name].draw(content);
	},
	fetchAll: function(callback) {
		callback = callback || function(){};
		var loader = [];
		for(var i in this.templates) {
			loader.push(this.templates[i].fetchTemplate());
		}
		$.when.apply($,loader)
		.done(function() {console.log("Templates loaded!"); callback(); })
		.fail(function(a) {alert("Error loading template: " + a);});
	},

	get: function(template) {
		if(this.templates[template] === undefined) alert("ERROR: Template "+template+" not found.");
		return this.templates[template];
	}
};

function Page(template, content) {
	//A page is a combination of a template and content to fill it.
	//The format convention of the content is defined only by the template,
	//we won't care about it.
	this.__template = template;
	this.content = content;

	this.getTemplate = function() {
		if(typeof this.__template == Template ) {
			return this.__template;
		}else{
			return Templates.get(this.__template);
		}
	};

	this.draw = function() {
		return this.getTemplate().draw(content);	this.compiledTemplate= false;
	this.templateUrl = templateUrl;
	this.draw = function(contents) {
		//We compile the template if it isn't compiled yet.
		this.compiledTemplate = this.compiledTemplate || Handlebars.compile(this.template);
		return this.compiledTemplate(contents);

	};

}

var Pages = {
	pages: {},
	add: function(name, template, content) {
		this.pages[name] = new Page(template, content);
	},
	draw: function(page) {
		if(this.pages[page] === undefined) alert("ERROR: Page "+page+" not found.");
		return this.pages[page].draw();
	},
	go: function(page) {
		$('#content').html(this.draw(page));
	}
};



Templates.add("narrative","narrative.html");


Pages.add("page1", "narrative", {
	text: "texto narrativa 1",
	content:"contenido pagina 1",
	next: "page2"}
);

Pages.add("page2", "narrative", {
	text: "texto narrativa 2",
	content:"contenido pagina 2",
	next: "page3"}
);
Pages.add("page3", "narrative",
	{text: "texto narrativa 3",
	content:"contenido pagina 3",
	next: "page4"}
);

function start() {
Templates.fetchAll(function() {
	Pages.go("page1");
});
}

$(window).load(start);