example/precompiled/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="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <script src="../../dist/clientRuntime.js"></script>

    <!-- check template.js for non-minified version -->
    <script src="template.min.js"></script>

    <script>
        var id = 3;

        var env = {
            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'
                }
            ],

            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);
            },

            addClick: function() {
                var names = ['Jack', 'Kirk', 'Liza', 'Matthew', 'Joe', 'Jennifer'];

                env.people.push({
                    id: 'id' + id,
                    name: names[id % names.length],
                    inner: [],
                    city: 'New York'
                });

                id++;

                loop.update(env);
            },

            popClick: function() {
                env.people.pop();
                loop.update(env);
            }
        };

        var i18n = {
            title: 'HTML::Template powered by virtual-dom',

            city_copy: 'City: ',

            description: 'Interact with UI and check inspector for DOM changes. Notice how local state (like input text) stays there.'
        };

        var PersonBlock = function(props) {
            this.props = props;
        };

        PersonBlock.prototype.blockWillMount = function() {
            this.el.style.display = 'none';

            console.log('will mount', this.props.p, this.el);
        };

        PersonBlock.prototype.blockDidMount = function() {
            var $el = $(this.el);

            setTimeout(function() {
                $el.slideDown();
            }, 0);

            console.log('did mount', this.props.p, this.el);
        };

        PersonBlock.prototype.blockWillUpdate = function(nextProps) {
            console.log('going to update from', this.props, 'to', nextProps);
        };

        PersonBlock.prototype.blockDidUpdate = function(previousProps) {
            console.log('updated from', previousProps, 'to', this.props);
        };

        PersonBlock.prototype.blockWillUnmount = function() {
            console.log('will unmount', this.props.p, this.el);
        };

        var loop = clientRuntime.mainLoop(
            env,
            render(clientRuntime.h, {
                resolveLookup: function(propertyName) {
                    return i18n[propertyName];
                },
                blocks: {
                    Person: PersonBlock
                }
            })
        );

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