DomChanger ToDo Example

by James Doyle

HTML

<script src="https://rawgit.com/creationix/domchanger/master/domchanger.js"></script>

JavaScript

domChanger(TodoApp, document.body).update();

function TodoApp(emit, refresh) {
    var items = [],
        text = "";

    return {
        render: render
    };

    function render() {
        return ["div", ["h3", "TODO"], [TodoList, items], ["form", {
            onsubmit: handleSubmit
        }, ["input", {
            onchange: onChange,
            value: text
        }],
            ["input", {
                type: "submit",
                value: "Add #" + (items.length + 1)
            }]
        ]];
    }

    function handleSubmit(evt) {
        evt.preventDefault();
        items.push(text);
        text = "";
        this.reset();
        refresh();
    }

    function onChange(evt) {
        text = evt.target.value;
    }
}

function TodoList() {
    return {
        render: render
    };

    function render(items) {
        return ["ul", items.map(function (itemText) {
            return ["li", itemText];
        })];
    }
}