A Pen by Moncho Varela.
body{
margin:0;
padding:0;
font-size:16px;
text-rendering: optimizeLegibility;
background:#eee;
color:#777;
}
.demo{
display:block;
width:600px;
margin:0 auto;
}
.item {
display: block;
width: 98%;
overflow: hidden;
padding: 1%;
}
.item img {
display: block;
width: 99%;
border: 5px solid #FFF;
box-shadow: 0 1px 1px #DFDDDD;
}
.item{
font-family: 'Josefin Sans', sans-serif;
font-weight:400;
}
.item h3{
font-family: 'Josefin Sans', sans-serif;
font-weight:700;
text-transform:uppercase;
}
var url = 'https://dl.dropboxusercontent.com/u/23834858/api/data.json',
selector = '.demo';
var template = [
' <div id="id_{{id}}" class="item">',
' <img src="{{photo}}" />',
' <h3>{{title}}</h3>',
' <p>{{content}}</p>',
' <p><b>--</b><small> {{author}}</small></p>',
' </div>'
].join('');
// call json data gejson(url,callback);
getjson(url, function(e) {
var render, obj = e.gallery;
Array.prototype.forEach.call(obj, function(el, i) {
render = tmpl(template);
compile(selector, render(el));
});
});
//----------------------
// Public Functions
//----------------------
function getjson(url, callback) {
var self = this,
ajax = new XMLHttpRequest();
ajax.open('GET', url, true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
// parse to json data
var data = JSON.parse(ajax.responseText);
// get controls template
return callback(data);
} else {
// Error
console.log(ajax.status);
}
}
};
ajax.send();
};
// Micro - Templating
// http://codepen.io/FWeinb/pen/obAhf
function tmpl(t) {
var code = 'with(o){return \'' + t.replace(/{{\s*(.+?)\s*}}/g, '\'+($1)+\'') + '\';}';
return new Function('o', code);
}
function compile(selector,el) {
var div = document.createElement('div');
div.innerHTML = el;
return document.querySelector(selector).appendChild(div);
}
<div class="demo"></div>
Micro templating http://codepen.io/FWeinb/pen/obAhf
A Pen by Moncho Varela on CodePen.