nakome
7/29/2014 - 1:48 PM

A Pen by Moncho Varela.

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>