Skip to content

Instantly share code, notes, and snippets.

@Devric

Devric/gist:2010145

Created Mar 10, 2012
Embed
What would you like to do?
js: quick micro template
// HTML
// ==================================
<script type="template" id="template">
<h2>
<a href="{{href}}">
{{title}}
</a>
</h2>
<img src="{{imgSrc}}" alt="{{title}}">
</script>
// 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'),
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;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.