examples/redux-example.html

<!DOCTYPE html>
<html>
    <head>
        <title>Redux example</title>
        <meta charset="utf-8">
    </head>
    <body>
        <!-- target element -->
        <my-counter></my-counter>
        
        <!-- our templates -->
        <template data-tagname="my-counter">
            <p>
                Clicked: <span id="value">{{ count }}</span> times
                <button onclick="increment()">+</button>
                <button onclick="decrement()">-</button>
            </p>
        </template>

        <!-- dependencies -->
        <script src="./redux.min.js"></script>
        <script src="../build/magery-runtime.js"></script>
        <script src="../build/magery-compiler.js"></script>
        
        <!-- application code -->
        <script>
         var components = MageryCompiler.compile('template');
         
         // create a store
         var store = Redux.createStore(function (state, action) {
             if (typeof state === 'undefined') {
                 return {count: 0};
             }
             switch (action.type) {
                 case 'INCREMENT':
                     return {count: state.count + 1};
                 case 'DECREMENT':
                     return {count: state.count - 1};
                 default:
                     return state;
             }
         });
         
         var target = document.querySelector('my-counter');
         var handlers = {};
         
         function render() {
             components['my-counter'](target, store.getState(), handlers);
         }
         
         // add event handlers using Magery
         handlers.increment = function () {
             store.dispatch({type: 'INCREMENT'});
         };
         handlers.decrement = function () {
             store.dispatch({type: 'DECREMENT'});
         };
         
         // update the page when the store changes
         store.subscribe(render);
         
         // initial render
         render();
        </script>
    </body>
</html>