Skip to content

Instantly share code, notes, and snippets.

@robertcasanova
Created February 25, 2012 19:57
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robertcasanova/1910313 to your computer and use it in GitHub Desktop.
Save robertcasanova/1910313 to your computer and use it in GitHub Desktop.
Micro Tmpl + RequireJS
<% for ( var i = 0; i < dataObject.length; i++ ) { %>
<article id="<%=dataObject[i].id%>" class="<%=(i % 2 == 1 ? "even" : "")%>">
<figure class="clearfix">
<img src="img/<%=i%>_<%=dataObject[i].profile_image_url%>" alt="<%=dataObject[i].id%>" title="<%=dataObject[i].id%>" />
<figcaption>
<strong><%=dataObject[i].id%></strong>
<span class="text"><%=dataObject[i].text%></span>
<span class="contact">Per contatti: <a href="mailto:<%=dataObject[i].from_user%>"><%=dataObject[i].from_user%></a></span>
</figcaption>
</figure>
</article>
<% } %>
require.config({
paths: {
"jquery": "libs/jquery-1.7.1.min",
"views": "../views"
}
});
require(["jquery","text!views/list.html","js/plugins.js","js/libs/tmpl.js"],
function($,html) {
var template = tmpl(html);
$('#loader_btn').click(function(){
$.getJSON('models/data.json').then(function(data){
$('#results').html(template(data)).slideDown();
});
})
}
);
// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
var cache = {};
this.tmpl = function tmpl(str, data){
// Figure out if we're getting a template, or if we need to
// load the template - and be sure to cache the result.
var fn = !/\W/.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
// Generate a reusable function that will serve as a template
// generator (and which will be cached).
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +
// Introduce the data as local variables using with(){}
"with(obj){p.push('" +
// Convert the template into pure JavaScript
str
.replace(/[\r\t\n]/g, " ")
.split("<%").join("\t")
.replace(/((^|%>)[^\t]*)'/g, "$1\r")
.replace(/\t=(.*?)%>/g, "',$1,'")
.split("\t").join("');")
.split("%>").join("p.push('")
.split("\r").join("\\'")
+ "');}return p.join('');");
// Provide some basic currying to the user
return data ? fn( data ) : fn;
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment