Client side rendering

client_side_rendering.md

Client side rendering

What is client side rendering?

On browser.js

function itemTemplate(item){
	return `<li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
					<span class="item-text">${item.text}</span>
					<div>
					<button data-id="${item._id}" class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
					<button data-id="${item._id}" class="delete-me btn btn-danger btn-sm">Delete</button>
					</div>
					</li>`
}

// Initial page load render
let ourHTML = items.map(function(item){
	return itemTemplate(item)
}).join('')
document.getElementById("item-list").insertAdjacentHTML("beforeend", ourHTML)

On server.js

Add this first script tag

			<script>
					let items = ${JSON.stringify(items)}
			</script>
			<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
			<script src="/browser.js">

Hollow out ul

			<ul id="item-list" class="list-group pb-5">
      
    </ul>

on browser.js

// Initial page load render
let ourHTML = items.map(function(item){
	return itemTemplate(item)
}).join('')
document.getElementById("item-list").insertAdjacentHTML("beforeend", ourHTML)

items is available in the global scope. We go through each of the items and return the html through this function

function itemTemplate(item){
	return `<li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
					<span class="item-text">${item.text}</span>
					<div>
					<button data-id="${item._id}" class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
					<button data-id="${item._id}" class="delete-me btn btn-danger btn-sm">Delete</button>
					</div>
					</li>`
}