diff --git a/examples/multiple-counters/counter.js b/examples/multiple-counters/counter.js index 66d34e83..f6eb444a 100644 --- a/examples/multiple-counters/counter.js +++ b/examples/multiple-counters/counter.js @@ -4,34 +4,41 @@ var Dec = 'dec'; // decrement the counter var Res = 'reset'; // reset counter: git.io/v9KJk function update(model, action) { // Update function takes the current state - console.log('update', model, action); - var i = 0; // - switch(action) { // and an action (String) runs a switch + // console.log('update', model, action); + var parts = action.split('-'); // e.g: inc-0 where 0 is the counter "id" + var act = parts[0]; + var index = parts[1]; + console.log('action:', action, '| act:', act, '| index:', index, + '| value:', model.counters[index]) + var new_model = JSON.parse(JSON.stringify(model)) // "clone" + switch(act) { // and an action (String) runs a switch case Inc: - var new_model = JSON.parse(JSON.stringify(model)) // "clone" - new_model.counters[i] = model.counters[i] + 1; - console.log('model:', model, 'new_model:', new_model); - return new_model; // subtract 1 from model + new_model.counters[index] = model.counters[index] + 1; + break; case Dec: - var new_model = JSON.parse(JSON.stringify(model)) // "clone" - new_model.counters[i] = model.counters[i] - 1; - console.log('model:', model, 'new_model:', new_model); - return new_model; - case Res: // use ES6 magic to create a new array with all values set to 0: - return { counters: new Array(model.counters.length).fill(0) }; // reset - default: return model; // if no action, return curent state. - } // (default action always returns current) + new_model.counters[index] = model.counters[index] - 1; + break; + case Res: // use ES6 Array.fill to create a new array with values set to 0: + new_model.counters[index] = 0; + break; + default: return model; // if action not defined, return curent state. + } + return new_model; } function view(signal, model, root) { - var i = 0; - empty(root); // clear root element before - [ // Store DOM nodes in an array - button('+', signal, Inc), // then iterate to append them - div('count', model.counters[i]), // create div with stat as text - button('-', signal, Dec), // decrement counter - button('Reset', signal, Res) // reset counter - ].forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+ + + empty(root); // clear root element before re-rendering the App (DOM). + model.counters.map(function(item, index) { + return container(index, [ // wrap DOM nodes in an "container" + button('+', signal, Inc + '-' + index), // append index to action + div('count', model.counters[index]), // create div w/ count as text + button('-', signal, Dec + '-' + index), // decrement counter + button('Reset', signal, Res + '-' + index) // reset counter + ]); + }).forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+ + + } // yes, for loop is "faster" than forEach, but readability trumps "perf" here! // Mount Function receives all MUV and mounts the app in the "root" DOM Element @@ -53,15 +60,24 @@ function mount(model, update, view, root_element_id) { // empty the contents of a given DOM element "node" (before re-rendering) function empty(node) { while (node.firstChild) { - node.removeChild(node.firstChild); + node.removeChild(node.firstChild); } } // Inspired by: stackoverflow.com/a/3955238/1148249 +// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section +function container(index, elements) { + var con = document.createElement('section'); + con.id = index; + con.className = 'counter'; + elements.forEach(function(el) { con.appendChild(el) }); + return con; +} + function button(text, signal, action) { var button = document.createElement('button'); var text = document.createTextNode(text); // human-readable button text button.appendChild(text); // text goes *inside* not attrib - button.className = action; // use action as CSS class + button.className = action.split('-')[0]; // use action as CSS class button.id = action; // console.log(signal, ' action:', action) button.onclick = signal(action); // onclick tells how to process @@ -97,4 +113,4 @@ if (typeof module !== 'undefined' && module.exports) { } } else { init(document); } -mount({counters:[0]}, update, view, 'app'); +mount({counters:[0, 1, 2]}, update, view, 'app'); diff --git a/examples/multiple-counters/index.html b/examples/multiple-counters/index.html index 3aa84387..d7014c59 100644 --- a/examples/multiple-counters/index.html +++ b/examples/multiple-counters/index.html @@ -13,9 +13,6 @@
-