examples/simple-text-input.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Example: simple text input</title>
    </head>
    <body>
        <!-- target element -->
        <div id="container"></div>
        
        <!-- templates -->
        <template class="magery-templates">
            <div data-template="main" id="container">
                <h1>Hello, {{name}}!</h1>
                <form onsubmit="updateName(event)">
                    <input type="text" name="name" />
                    <button>Update name</button>
                </form>
            </div>
        </template>
        
        <script src="../build/magery.js"></script>
        <script>
         var templates = Magery.compile('.magery-templates');
         var element = document.getElementById('container');
         var data = {name: 'world'};

         function patch() {
             Magery.patch(templates, 'main', data, element);
         }

         window.app = templates['main'].bind({
             updateName: function (event) {
                 event.preventDefault();
                 var form = event.target;
                 data.name = form.name.value;
                 patch();
             }
         });

         patch();
        </script>
    </body>
</html>