spooky/refresh.html

## refresh.html
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>refresh</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            body {
                font-size: 24px;
            }
            div {
                margin: 3em;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>
            <span class="foo"></span>
            <strong id="bar"></strong>
            <span class="foo"></span>
        </div>

        <script>
            function refresh(data, mapper) {
                for (var m in mapper) mapper[m].set && "function" == typeof mapper[m].set && mapper[m].el && data[m] && mapper[m].set(mapper[m].el, data[m])
            };

            function innerTextOnAll(id) {
                return {
                    el: document.querySelectorAll(id),
                    set: function(el, val) {
                        el.forEach(e => e.innerText = val);
                    }
                }
            };

            const data = {
                foo: "hello",
                bar: "world"
            },
            mapper = {
                foo: innerTextOnAll(".foo"),
                bar: innerTextOnAll("#bar")
            };

            refresh(data, mapper);
        </script>
    </body>
</html>
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>refresh</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css">
	body {
	font-size: 24px;
	}
	div {
	margin: 3em;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div>
	<span class="foo"></span>
	<strong id="bar"></strong>
	<span class="foo"></span>
	</div>

	<script>
	function refresh(data, mapper) {
	for (var m in mapper) mapper[m].set && "function" == typeof mapper[m].set && mapper[m].el && data[m] && mapper[m].set(mapper[m].el, data[m])
	};

	function innerTextOnAll(id) {
	return {
	el: document.querySelectorAll(id),
	set: function(el, val) {
	el.forEach(e => e.innerText = val);
	}
	}
	};

	const data = {
	foo: "hello",
	bar: "world"
	},
	mapper = {
	foo: innerTextOnAll(".foo"),
	bar: innerTextOnAll("#bar")
	};

	refresh(data, mapper);
	</script>
	</body>
	</html>