Data Reactivity with Vanilla JS

data-reactivity-with-vanilla-js.markdown

Data Reactivity with Vanilla JS

A Pen by Chris Ferdinandi on CodePen.

License.

a good explainer can be found here

index.html

<div id="app"></div>

script.js

// The data object (or state)
var data = {
	listName: 'Starting at Hogwarts',
	todos: []
};

// The state-based UI
var template = (data) => {

	// Create the list heading
	var html = '<h1>' + data.listName + '</h1>';

	// If there are no list items, show a message
	// Otherwise, display the list items
	if (data.todos.length < 1) {
		html += '<p><em>You do not have any items to complete yet. Please add some.</em></p>';
	} else {
		html += '<ul>' + data.todos.map(function (todo) {
			return '<li>' + todo + '</li>';
		}).join('') + '</ul>';
	}
	// Return the template
	return html;
};

/**
 * Reactivity update the data object
 * @param {Object} obj The data to update
 */
var setData = (obj) => {
	for (var key in obj) {
		if (obj.hasOwnProperty(key)) {
			data[key] = obj[key];
		}
	}
	app.innerHTML = template(data);
};

// Render the initial UI
var app = document.querySelector('#app');
app.innerHTML = template(data);

// Uncomment this to update the UI
// You can also open up the console feature and run it there
/*
setData({todos: [
	'Fix my wand',
	'Buy new robes',
	'Enroll in courses'
]});
*/