examples/live-text-input.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Example: live 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>
                <input type="text" oninput="updateName(event)" />
            </div>
            
        </template>

        <script src="../build/magery.js"></script>
        <script>
         var templates = Magery.compile('.magery-templates');
         var container = document.getElementById('container');
         var data = {name: 'world'};
         
         templates['main'].bind({
             updateName: function (event) {
                 data.name = event.target.value;
                 Magery.patch(templates, 'main', data, container);
             }
         });
         
         Magery.patch(templates, 'main', data, container);
        </script> 
    </body>
</html>