examples/server-rendered.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Server-rendered page</title>
    </head>
    <body>
        <!-- the output itself -->
        <div data-bind="greeting" data-context='{"name":"world"}'>
            <h1>Hello, world!</h1>
            <input value="world">
        </div>

        <!-- the embedded template -->
        <template class="magery-templates">
            <div data-template="greeting" data-embed="true">
                <h1>Hello, {{name}}!</h1>
                <input value="{{name}}" oninput="updateName(event)">
            </div>
        </template>

        <!-- our javascript -->
        <script src="../build/magery.min.js"></script>
        <script>
         // load templates from all .magery-templates elements on page
         var templates = Magery.compile('.magery-templates');

         // find output rendered by server
         var element = document.querySelector('[data-bind=greeting]');

         // parse embedded context data from the element
         var data = JSON.parse(element.getAttribute('data-context'));

         // bind template to all elements with data-bind='greeting' attribute
         templates['greeting'].bind({
             updateName: function (event) {
                 data.name = event.target.value;
                 Magery.patch(templates, 'greeting', data, element);
             }
         });

         // set up initial event handlers
         Magery.patch(templates, 'greeting', data, element);
        </script>
    </body>
</html>