davidwhitney/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>

    <script type="module">

        function someClick() {
            alert("hello");
        }

        const anything = {
            foo: 'bar',
            title: "google",
            url: "https://www.google.com",
            baz: {
                qux: 'quux'
            },
            items: [
                { foo: "barry" }
            ]
        };

        renderTemplate("main", "someTemplate", anything);

        function renderTemplate(targetId, templateId, data = null) {
            const template = document.getElementById(templateId);
            const clone = template.content.cloneNode(true);

            const elements = clone.querySelectorAll("*");
            elements.forEach(ele => {
                const bindingAttrs = [...ele.attributes].filter(a => a.name.startsWith("data-bind"));

                bindingAttrs.forEach(attr => {
                    const target = attr.name.replace(/data-bind-/, "").replace(/data-bind/, "");
                    const targetType = target.startsWith("on") ? "HANDLER" : "PROPERTY";
                    const targetProp = target === "" ? "innerHTML" : target;

                    const prefix = targetType === "PROPERTY" ? "data." : "";
                    const expression = prefix + attr.value.replace(/;\n\r\n/g, "");

                    // Maybe use a framework with more validation here ;)
                    ele[targetProp] = targetType === "PROPERTY" ? eval(expression) : () => { eval(expression) };
                    ele.removeAttribute(attr.name);
                });
            });

            const target = document.getElementById(targetId);
            target.innerHTML = "";
            target.appendChild(clone);
        }


    </script>
</head>

<body>

    <div id="main">
    </div>

    <template id="someTemplate">
        <h1>Hello world</h1>
        <div data-bind="foo" data-bind-onclick="someClick();"></div>
        <div>
            Nested: <span data-bind="baz.qux"></span>
        </div>
        <div data-bind="items[0].foo"></div>
        <a data-bind-href="url" data-bind="title"></a>
    </template>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Home</title>

	<script type="module">

	function someClick() {
	alert("hello");
	}

	const anything = {
	foo: 'bar',
	title: "google",
	url: "https://www.google.com",
	baz: {
	qux: 'quux'
	},
	items: [
	{ foo: "barry" }
	]
	};

	renderTemplate("main", "someTemplate", anything);

	function renderTemplate(targetId, templateId, data = null) {
	const template = document.getElementById(templateId);
	const clone = template.content.cloneNode(true);

	const elements = clone.querySelectorAll("*");
	elements.forEach(ele => {
	const bindingAttrs = [...ele.attributes].filter(a => a.name.startsWith("data-bind"));

	bindingAttrs.forEach(attr => {
	const target = attr.name.replace(/data-bind-/, "").replace(/data-bind/, "");
	const targetType = target.startsWith("on") ? "HANDLER" : "PROPERTY";
	const targetProp = target === "" ? "innerHTML" : target;

	const prefix = targetType === "PROPERTY" ? "data." : "";
	const expression = prefix + attr.value.replace(/;\n\r\n/g, "");

	// Maybe use a framework with more validation here ;)
	ele[targetProp] = targetType === "PROPERTY" ? eval(expression) : () => { eval(expression) };
	ele.removeAttribute(attr.name);
	});
	});

	const target = document.getElementById(targetId);
	target.innerHTML = "";
	target.appendChild(clone);
	}


	</script>
	</head>

	<body>

	<div id="main">
	</div>

	<template id="someTemplate">
	<h1>Hello world</h1>
	<div data-bind="foo" data-bind-onclick="someClick();"></div>
	<div>
	Nested: <span data-bind="baz.qux"></span>
	</div>
	<div data-bind="items[0].foo"></div>
	<a data-bind-href="url" data-bind="title"></a>
	</template>

	</body>
	</html>