Example - using templates in straight up js.

js-template.js

/**
 * Render resources
 * Builds out Endurance Resources (FAQ/Glossary) from a js object
 * @see views/faq.html.slim & views/glossary.html.slim
 */


/** @ example tempalte
script#template-resources type="text/template"
  .accordion__item id="faq{{count}}"
    h4.accordion__title.js-accordion-trigger
      i.icon-plus
      | {{title}}
    .accordion__content
      p
        | {{content}}
*/

// Check for var on page
if (document.getElementById('js-data') != null) {

	var RenderResources = (function() {

		var template = document.getElementById('template-resources'),
				outputId = document.getElementById('js-data'),
				dataType = outputId.dataset.type,
				templateHtml = template.innerHTML,
				listHtml = "";

		return {

			/**
			 * Init
			 */
			init: function() {
				this.bindEvents();
			},

			/**
			 * bindEvents
			 * Call data getter
			 */
			bindEvents: function() {
				RenderResources.getData(dataType);
			},

			/**
			 * Get Data Loop
			 * Includes js template prep.
			 */
			getData: function(e) {
				// To build Anchor IDs
				var count = 1;

				for (var key in obj) {
					if (obj[key].section === dataType) {
						// Map vars to our templ
						listHtml += templateHtml.replace(/{{count}}/g, count)
																		.replace(/{{title}}/g, obj[key].title)
																		.replace(/{{content}}/g, obj[key].content);
						count++;
					}
				}
				RenderResources.renderData(outputId);
			},

			/**
			 * Render Out Data to specfiic ID
			 */
			renderData: function(id) {
				var cleanHtml = listHtml.replace(/[^\x00-\x7F]/g,"");
				//var cleanHtml = decodeURIComponent(listHtml);
				id.innerHTML = cleanHtml;
			},
	  };
	})();

	// Let's Go
	RenderResources.init();
}