• Home

    • > > Quick Tip: Create a Makeshift JavaScript Templating Solution

    Quick Tip: Create a Makeshift JavaScript Templating Solution

    Posted by Unknown on Wednesday, 28 August 2013 at 11:10

    Download Source Files
    Demo View It Online
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    ;(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:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    ;(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.
    Ranking: 5

    { 0 comments... read them below or add one }

    Post a Comment

    UpLoad Your Picture

    advertiser

    Search This Blog

    advertiser