Simple Templating

by dkunin

HTML

<!doctype html public 'ahh hell yeah'>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <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}}">
      <span>{{imgSrc}}</span>
  </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: "http://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: "http://d2o0t5hpnwv4c1.cloudfront.net/989_quiz2jquerybasics/quiz.jpg"
    },
    {
      title: "WordPress Plugin Development Essentials",
      href: "http://net.tutsplus.com/tutorials/wordpress/wordpress-plugin-development-essentials/",
      imgSrc: "http://d2o0t5hpnwv4c1.cloudfront.net/1101_wpPlugins/wpplugincourse.png"
    }
  ],
      //template = document.querySelector('#template').innerHTML,
      //result = document.querySelector('.result'),
      template = $('#template').html(),
      result = $('.result'),
      
      i = 0, len = data.length,
      fragment = '';

  for ( ; i < len; i++ ) {
    fragment += template
      .replace( /\{\{title\}\}/g, data[i].title )
      .replace( /\{\{href\}\}/g, data[i].href )
      .replace( /\{\{imgSrc\}\}/g, data[i].imgSrc );
  }

  result.html(fragment);
})();