Skip to content

Instantly share code, notes, and snippets.

@tochman

tochman/handlebars-with-json.html

Last active January 30, 2018 13:38
Show Gist options
  • Save tochman/f2a3822fcd8483cd4fe3dcaff3e4f847 to your computer and use it in GitHub Desktop.
Save tochman/f2a3822fcd8483cd4fe3dcaff3e4f847 to your computer and use it in GitHub Desktop.
Download ZIP
CCCC in JS
Raw
handlebars-with-json.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CCCC Handlebars 2</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/tochman/4d4acd3051e14a25d509d8a2e6fadd01/raw/7f664067a0fc8450b96e1bd4098401e903f6de7e/app.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
</head>
<body>
<section id="contacts">
<h1>Contacts</h1>
</section>
<script id="contact-template" type="text/x-handlebars-template">
{{#each contacts as |contact|}}
<div class="card">
<div class="card-image">
<img src="{{contact.attributes.image}}" />
</div>
<div class="content">
{{context}}
<div class="location">{{contact.attributes.location}}</div>
<img class="avatar" src="https://avatars.io/twitter/{{contact.attributes.twitter}}">
<h1>{{contact.attributes.name}}</h1>
<h2>{{contact.attributes.role}}</h2>
<h3>Currently at: {{contact.attributes.company}}</h3>
<p>{{contact.attributes.info}}</p>
<a href="mailto:{{contact.attributes.email}}">{{contact.attributes.email}}</a> |
<a href="http://www.twitter.com/{{contact.attributes.twitter}}">@{{contact.attributes.twitter}}</a>
</div>
</div>
{{/each}}
</script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
loadJSON('https://ca-address-book.herokuapp.com/api/contacts')
.then(function(resp) {
var section = document.getElementById('contacts')
renderTemplate(resp);
});
});
function loadJSON(url) {
return new Promise(function(resolve, reject) {
fetch(url)
.then(function(response) {
resolve(response.json());
}).catch(function(err) {
reject(error);
});
})
}
function renderTemplate(contacts) {
var context = {
contacts: contacts.data
}
var source = document.getElementById('contact-template').innerHTML;
var template = Handlebars.compile(source);
var html = template(context);
var elem = document.getElementById('contacts')
elem.innerHTML += html
}
</script>
</body>
</html>
Raw
handlebars.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CCCC Handlebars 1</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/tochman/4d4acd3051e14a25d509d8a2e6fadd01/raw/7f664067a0fc8450b96e1bd4098401e903f6de7e/app.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
</head>
<body>
<section id="contacts">
<h1>Contacts</h1>
</section>
<script id="contact-template" type="text/x-handlebars-template">
{{#each contacts as |contact|}}
<div class="card">
<div class="card-image">
<img src="{{contact.image}}" />
</div>
<div class="content">
{{context}}
<div class="location">{{contact.location}}</div>
<img class="avatar" src="https://avatars.io/twitter/{{contact.twitter}}">
<h1>{{contact.name}}</h1>
<h2>{{contact.role}}</h2>
<h3>Currently at: {{contact.company}}</h3>
<p>{{contact.info}}</p>
<a href="mailto:{{contact.email}}">{{contact.email}}</a> |
<a href="http://www.twitter.com/{{contact.twitter}}">@{{contact.twitter}}</a>
</div>
</div>
{{/each}}
</script>
<script type="text/javascript">
var context = {
contacts: [{
name: 'Thomas Ochman',
email: 'thomas@craftacademy.se',
company: 'Craft Academy',
role: 'Founder & Head Coach',
twitter: 'thomasochman',
location: 'Sweden',
info: 'Just a programmer, not a Ninja...',
image: 'https://goo.gl/cctNRa'
},
{
name: 'Elliot Ochman',
email: 'elliot@craftacademy.se',
company: 'Craft Academy',
role: 'Student',
twitter: 'CraftAcademySE',
location: 'Sweden',
info: 'School Of Hard Knocks',
image: 'https://thumbnailer.mixcloud.com/unsafe/1200x628/profile/4/2/6/7/2c3c-d31b-4e07-b1ce-80d3f6e3cf56'
}
]
}
var source = document.getElementById('contact-template').innerHTML;
var template = Handlebars.compile(source);
var html = template(context);
var elem = document.getElementById('contacts')
elem.innerHTML += html
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CCCC In JS</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/tochman/4d4acd3051e14a25d509d8a2e6fadd01/raw/7f664067a0fc8450b96e1bd4098401e903f6de7e/app.css">
</head>
<body>
<h1>Contacts</h1>
<section id="contacts"></section>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
loadJSON('https://ca-address-book.herokuapp.com/api/contacts')
.then(function(resp) {
var section = document.getElementById('contacts')
addContacts(resp.data, section);
});
});
function loadJSON(url) {
return new Promise(function(resolve, reject) {
fetch(url)
.then(function(response) {
resolve(response.json());
}).catch(function(err) {
reject(error);
});
})
}
function addContacts(contactsCollection, section) {
contactsCollection.forEach(function(contact) {
var div = document.createElement('div');
div.innerHTML = contactCard(contact, div)
section.appendChild(div);
})
}
function contactCard(contact, div) {
div.className = 'card';
var html =
'<div class="card-image">\
<img src="' + contact.attributes.image + '" />\
</div>\
<div class="content">\
<div class="location">' + contact.attributes.location +
'</div>\
<img class="avatar" src="https://avatars.io/twitter/' + contact.attributes.twitter + '">\
<h1>' + contact.attributes.name + '</h1>\
<h2>' + contact.attributes.role + '</h2>\
<h3>' + contact.attributes.company + '</h3>\
<p>' + contact.attributes.info + '</p>\
<a href="mailto:' + contact.attributes.email + '">' + contact.attributes.email + '</a> |\
<a href="http://www.twitter.com/' + contact.attributes.twitter + '">@' +
contact.attributes.twitter + '</a>\
</div>';
return html;
}
</script>
</body>
</html>
@diraulo
Copy link

diraulo commented Jan 30, 2018

Few ES2016 sprinkle to improve code

  1. Use Template string
function contactCard(contact, div) {
  div.className = 'card';
  let html = `
        <div class="card-image">
          <img src="${contact.attributes.image}" />
        </div>
        <div class="content">
          <div class="location">${contact.attributes.location}</div>
          <img class="avatar" src="https://avatars.io/twitter/${contact.attributes.twitter}">
          <h1>${contact.attributes.name}</h1>
          <h2>${contact.attributes.role}</h2>
          <h3>${contact.attributes.company}</h3>
          <p>${contact.attributes.info}</p>
          <a href="mailto:${contact.attributes.email}">${contact.attributes.email}</a> |
          <a href="http://www.twitter.com/${contact.attributes.twitter}">@${contact.attributes.twitter}</a>
        </div>
      `;

  return html;
}
  1. Use arrow functions
document.addEventListener('DOMContentLoaded', () => {
  loadJSON('https://ca-address-book.herokuapp.com/api/contacts')
    .then(response => {
      const section = document.getElementById('contacts');
      addContacts(response.data, section);
    });
});

function loadJSON(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => resolve(response.json()))
      .catch(error => reject(error));
  });
}

function addContacts(contactsCollection, section) {
  contactsCollection.forEach(contact => {
    var div = document.createElement('div');
    div.innerHTML = contactCard(contact, div)
    section.appendChild(div);
  });
}

@tochman
Copy link
Author

tochman commented Jan 30, 2018

Good input Roaul. Thx.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment