Improvised JavaScript template engine
Suppose you do not need a full-fledged template engine for a web project, but on the other hand there are occasionally places in the code where it would be good to separate HTML from JavaScript. In this case, one solution might be to use the simplest JavaScript-based template itself.
Source code
Demo
The method outlined in the video is more readable, however, if you want more automation, then you can dynamically apply values and regular expressions, like this:
Source code
Demo
Video (choose HD for the most convenient viewing):
Result code:
HTML
<!doctype html> <html> <head> <meta charset=utf-8> <title> </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() { // AJAX- 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'), 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 (javascript)
The method outlined in the video is more readable, however, if you want more automation, then you can dynamically apply values and regular expressions, like this:
(function () { // AJAX - 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'), attachTemplateToData; // . // 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); })(); ')
Source: https://habr.com/ru/post/143743/
All Articles