examples/hello-universe.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My App</title>
    </head>
    <body>
        <!-- target element -->
        <div id="container"></div>

        <!-- template -->
        <template class="magery-templates">
            
            <div data-template="app" id="container">
                <h1>Hello, {{name}}!</h1>
                <input type="text" value="{{name}}" oninput="updateName(event)" />
            </div>
            
        </template>

        <!-- patch the target using the template -->
        <script src="../build/magery.js"></script>
        <script>
         var templates = Magery.compile('.magery-templates');
         var container = document.getElementById('container');
         var data = {name: 'galaxy'};

         templates['app'].bind({
             updateName: function (event) {
                 // update the data object, then patch the page
                 data.name = event.target.value;
                 Magery.patch(templates, 'app', data, container);
             }
         });
         
         // initial patch sets up event handlers
         Magery.patch(templates, 'app', data, container);
        </script>
    </body>
</html>