example/client/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <meta charset="utf-8" />

    <style>
        .app {
            padding: 10px;
            width: 500px;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        }

        .list {
            padding: 25px;
            margin-bottom: 20px;
            border-bottom: 1px solid #CCC;
        }

        .item {
            padding: 10px;
            cursor: pointer;
        }

        .item--active {
            background-color: #EEE;
        }

        .input {
            padding: 5px 0;
        }
    </style>
</head>
<body>
    <script src="../../dist/clientRuntime.js"></script>
    <script src="../../dist/clientRender.js"></script>

    <script id="tmpl" type="text/template">
    <div class="app">
        <h2><TMPL_VAR title></h2>

        <p><TMPL_VAR description></p>

        <ul class="list">
            <TMPL_LOOP people>
                <li class="item <TMPL_IF active>item--active</TMPL_IF>" onclick="itemClick(<TMPL_VAR id>)">
                    <TMPL_VAR name> <a href="#/items/<TMPL_VAR id>">some link</a>

                    <div class="input"><input type="text" placeholder="Type something here"/></div>

                    <ul>
                        <TMPL_LOOP inner>
                            <li><TMPL_VAR title></li>
                        </TMPL_LOOP>
                    </ul>

                    <div><TMPL_VAR city_copy><TMPL_VAR city></div>

                    <TMPL_IF active>active<TMPL_ELSE>not active</TMPL_IF>

                    <div>
                        <button onclick="counterClick(<TMPL_VAR id>)">
                            <span>Click me</span>
                        </button>
                        <span><TMPL_VAR counter></span>
                    </div>
                </li>
            </TMPL_LOOP>
        </ul>

        <div>
            <a href="<TMPL_VAR githubLink>"><TMPL_VAR githubLink></a>
        </div>
    </div>
    </script>

    <script>
        var env = {
            title: 'HTML::Template powered by virtual-dom',

            city_copy: 'City: ',

            people: [
                {
                    id: 'id1',
                    name: 'John',
                    inner: [{ title: 'a1' }, { title: 'b1' }],
                    city: 'New York',
                    active: true
                },
                {
                    id: 'id2',
                    name: 'Mary',
                    inner: [{ title: 'a2' }, { title: 'b2' }],
                    city: 'Moscow'
                }
            ],
            description: 'Interact with UI and check inspector for DOM changes. Notice how local state (like input text) stays there.',

            githubLink: 'https://github.com/agentcooper/htmltemplate-vdom',

            itemClick: function(id) {
                env.people.forEach(function(person) {
                    person.active = String(person.id) === String(id);
                });

                loop.update(env);
            },

            counterClick: function(id) {
                env.people.forEach(function(person) {
                    if (String(person.id) === String(id)) {
                        person.counter = person.counter || 0;
                        person.counter += 1;
                    }
                });

                loop.update(env);
            }
        };

        var template = document.querySelector('#tmpl').innerHTML.trim();

        var loop = clientRuntime.mainLoop(env, function(state) {
            var vdom = clientRender(template, state, clientRuntime.h);

            return vdom;
        });

        document.body.appendChild(loop.target);
    </script>
</body>
</html>