render templates from file

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"eslint.enable": false
+}

index.html

@@ -25,8 +25,8 @@
 
 	<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.js"></script>
 	<script src="js/ejs.js"></script>
-	<script src="js/ejs-utils.js"></script>
 	<script src="js/utils.js"></script>
+	<script src="js/ejs-utils.js"></script>
 	<script src="js/index.js"></script>
 </body>
 </html>

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);

templates/article.ejs

@@ -0,0 +1,8 @@
+<div class="card">
+	<div class="card-body">
+		<h4 class="card-title"><%= Utils.ellipsis(subject, 80) %></h4>
+		<h5 class="card-subtitle"><%= Utils.ellipsis(from ? from : from_email, 500) %></h5>
+		<p class="card-text"><%= Utils.ellipsis(body, 500) %></p>
+		<a class="card-link" href="https://fcku.it/it.comp.console/thread/<%= id %>">leggi tutto...</a>
+	</div>
+</div>

templates/articles.ejs

@@ -0,0 +1,10 @@
+<%
+for (var i=0; i < threads.length - 1; i += 2) {
+%>
+
+<div class="row">
+	<div class="sm-12 md-6 col"><%- ejs.rtfe('article', threads[i]) %></div>
+	<div class="sm-12 md-6 col"><%- ejs.rtfe('article', threads[i + 1]) %></div>
+</div>
+
+<% } %>