examples/managed-text-input.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Example: managed text input</title>
    </head>
    <body>
        <!-- target element -->
        <div id="container"></div>
        
        <!-- templates -->
        <template class="magery-templates">
            <div data-template="main" id="container">
                <h1>Number: {{number_str}}</h1>
                <p>
                    The input below should only allow you to enter digits
                    (0-9), not letters etc.
                </p>
                <label for="id_number">Enter a number:</label>
                <input type="text"
                       id="id_number"
                       name="number"
                       value="{{number_str}}"
                       oninput="updateNumber(event)" />
            </div>
        </template>
        
        <script src="../build/magery.js"></script>
        <script>
         var templates = Magery.compile('.magery-templates');
         var container = document.getElementById('container');
         var data = {number_str: ''};

         templates['main'].bind({
             updateNumber: function (event) {
                 if (/^[0-9]*$/.test(event.target.value)) {
                     data.number_str = event.target.value;
                     Magery.patch(templates, 'main', data, container);
                 }
             }
         });

         Magery.patch(templates, 'main', data, container);
        </script>
    </body>
</html>