Quick Tip: Create a Makeshift JavaScript Templating Solution

Sometimes, you don't require a high-quality templating solution, but still need to keep from mixing lots of nasty HTML into your JavaScript. In these cases, a simple, makeshift templating system can go a long way.

Choose 720p for the best clarity.
Subscribe to our YouTube channel for more training.

Final Source

HTML

<!doctype html public 'ahh hell yeah'>
<html>
<head>
	<meta charset=utf-8>
	<title>Simple Templating</title>
</head>
<body>
  
  <div class="result"></div>
  
  <script type="template" id="template">
    <h2> 
      <a href="{{href}}">
        {{title}} 
      </a>
    </h2>
    <img src="{{imgSrc}}" alt="{{title}}">
  </script>

</body>
</html>

JavaScript

;(function() {
  // simulates AJAX request
  var data = [
    {
      title: "Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5",
      href: "http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/",
      imgSrc: "https://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/sticky_notes.jpg"
    },
    {
      title: "Nettuts+ Quiz #8",
      href: "http://net.tutsplus.com/articles/quizzes/nettuts-quiz-8-abbreviations-darth-sidious-edition/",
      imgSrc: "https://d2o0t5hpnwv4c1.cloudfront.net/989_quiz2jquerybasics/quiz.jpg"
    },
    {
      title: "WordPress Plugin Development Essentials",
      href: "http://net.tutsplus.com/tutorials/wordpress/wordpress-plugin-development-essentials/",
      imgSrc: "https://d2o0t5hpnwv4c1.cloudfront.net/1101_wpPlugins/wpplugincourse.png"
    }    
  ],
      template = document.querySelector('#template').innerHTML,
      result = document.querySelector('.result'),
      i = 0, len = data.length, 
      fragment = '';
  
  for ( ; i < len; i++ ) {
    fragment += template
      .replace( /\{\{title\}\}/, data[i].title )
      .replace( /\{\{href\}\}/, data[i].href )
      .replace( /\{\{imgSrc\}\}/, data[i].imgSrc );  
  }

  result.innerHTML = fragment;
})();

Alternative

The method outlined in the screencast is the most readable, however, if you'd prefer a more automated approach, we can apply the values and regular expressions dynamically, like so:

;(function () {
    // simulates AJAX request
    var data = [{
        title: "Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5",
        href: "http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/",
        imgSrc: "https://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/sticky_notes.jpg"
    }, {
        title: "Nettuts+ Quiz #8",
        href: "http://net.tutsplus.com/articles/quizzes/nettuts-quiz-8-abbreviations-darth-sidious-edition/",
        imgSrc: "https://d2o0t5hpnwv4c1.cloudfront.net/989_quiz2jquerybasics/quiz.jpg"
    }, {
        title: "WordPress Plugin Development Essentials",
        href: "http://net.tutsplus.com/tutorials/wordpress/wordpress-plugin-development-essentials/",
        imgSrc: "https://d2o0t5hpnwv4c1.cloudfront.net/1101_wpPlugins/wpplugincourse.png"
    }],
        template = document.querySelector('#template').innerHTML,
        result = document.querySelector('.result'),
        attachTemplateToData;


    // Accepts a template and data. Searches through the
    // data, and replaces each key in the template, accordingly.
    attachTemplateToData = function(template, data) {
        var i = 0,
            len = data.length,
            fragment = '';

        // For each item in the object, make the necessary replacement
        function replace(obj) {
            var t, key, reg;

            for (key in obj) {
                reg = new RegExp('{{' + key + '}}', 'ig');
                t = (t || template).replace(reg, obj[key]);
            }

            return t;
        }

        for (; i < len; i++) {
            fragment += replace(data[i]);
        }

        return fragment;
    };

    result.innerHTML = attachTemplateToData(template, data);

})();

This is the method that I'm most likely to use.

Additional Tools

If you'd prefer a more flexible solution, any of the following should do the trick!

HIGHLIGHTS OF THE DAY