Skip to content

Instantly share code, notes, and snippets.

@ierhalim
Last active August 1, 2021 14:13
Show Gist options
  • Save ierhalim/ad70837a130884e8d6653e13c771ee77 to your computer and use it in GitHub Desktop.
Save ierhalim/ad70837a130884e8d6653e13c771ee77 to your computer and use it in GitHub Desktop.
Templates in javascript
function appMyList(data, itemTemplate, emptyTemplate) {
let htmlContent = `<div class='my-list'>`;
if (!!data && data.length > 0) {
for (let item of data) {
htmlContent += `<div class='list-item'> ${itemTemplate(item)}</div>`;
}
} else {
htmlContent += emptyTemplate();
}
htmlContent += `</div>`;
return htmlContent;
}
function myItemTemplate(item) {
return `<img src="${item.image}" width="200" height="200"/> ${item.name} ${item.lastName}`;
}
function emptyTemplate() {
return `<div class="warning">No records found.</div>`;
}
// Data created with: https://www.mockaroo.com/
let employeeList = [
{ name: 'Molly', lastName: 'Passler', image: 'http://dummyimage.com/132x100.png/ff4444/ffffff' },
{ name: 'Elisabeth', lastName: 'Bastow', image: 'http://dummyimage.com/243x100.png/dddddd/000000' },
{ name: 'Faunie', lastName: 'Lamers', image: 'http://dummyimage.com/119x100.png/5fa2dd/ffffff' },
{ name: 'Kendricks', lastName: 'Rackley', image: 'http://dummyimage.com/178x100.png/5fa2dd/ffffff' },
{ name: 'Cassy', lastName: 'Golland', image: 'http://dummyimage.com/132x100.png/ff4444/ffffff' }
];
let domContent = appMyList(employeeList, myItemTemplate, emptyTemplate);
document.body.innerHTML = domContent
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment