render templates from file

js/ejs-utils.js

@@ -1,3 +1,41 @@
-ejs.rtfe = function(templateElement, data) {
-	return ejs.render($('#template-' + templateElement).html(), data);
+ejs.rtfe = function(templateUrl, data) {
+	var templateFilename = templateUrl + '.ejs';
+	var templateFn = ejs.cache.get(templateFilename);
+
+	//if the template is already cached, return it and we are done
+	if (templateFn) {
+		//but first check if there is still a getter function for this template in the cache
+		//if yes, remove it so we clean up a bit
+		if (ejs.cache.remove && ejs.cache.get('getFnFor' + templateFilename)) {
+			ejs.cache.remove('getFnFor' + templateFilename);
+		}
+
+		return templateFn(data);
+
+	} else { //if the template is not cached, we need to get it and render it later once we have it. remember: this happens only if the template is not already cached
+
+		//is there a getFn for this template?
+		var getTemplateFn = ejs.cache.get('getFnFor' + templateFilename);
+		if (!getTemplateFn) {
+			getTemplateFn = $.get('/templates/' + templateFilename);
+			ejs.cache.set('getFnFor' + templateFilename, getTemplateFn);
+		}
+
+		var r = Utils.uuidv4();
+		getTemplateFn.then(function(template) {
+			$('#' + r).replaceWith(
+				ejs.render(
+					template,
+					data,
+					{
+						cache: true,
+						filename: templateFilename
+					}
+				)
+			);
+		});
+
+		return `<span style="display: none;" id="${r}"></span>`;
+	}
+
 };

js/index.js

@@ -4,15 +4,8 @@
 		n3wz.apiPrefix = '/api/';
 	}
 
-	$.when(
-		$.get('templates.ejs'),
-		$.getJSON(n3wz.apiPrefix + 'newsgroup/it.comp.console/threads')
-	)
-	.then(function(templates, threads) {
-		$('body').append(templates[0]);
-
-		$('.js-articles').html(ejs.rtfe('articles', {
-			threads: threads[0].threads
-		}));
+	$.getJSON(n3wz.apiPrefix + 'newsgroup/it.comp.console/threads')
+	.then(function(threads) {
+		$('.js-articles').html(ejs.rtfe('articles', threads));
 	});
 })(jQuery);