examples/simple-list.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Example: simple list</title>
    </head>
    <body>
        <!-- target element -->
        <div id="container"></div>

        <!-- templates -->
        <template class="magery-templates">
            <div data-template="main" id="container">
                <ul>
                    <li data-each="item in app.items">
                        {{item.name}} <button onclick="removeItem(app, item)">X</button>
                    </li>
                </ul>
                <button onclick="addItem(app)">add item</button>
            </div>
        </template>
        
        <script src="../build/magery.js"></script>
        <script>
         var templates = Magery.compile('.magery-templates');
         var element = document.getElementById('container');
         var data = {app: {items: []}};

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

         templates['main'].bind({
             addItem: function (app) {
                 app.items.push({name: '' + Math.random()});
                 patch();
             },
             removeItem: function (app, item) {
                 app.items = app.items.filter(function (x) {
                     return x !== item;
                 });
                 patch();
             }
         });

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