diff --git a/examples/counter-reset/counter.js b/examples/counter-reset/counter.js index 9c55d091..f7910634 100644 --- a/examples/counter-reset/counter.js +++ b/examples/counter-reset/counter.js @@ -12,14 +12,13 @@ function update (action, model) { // Update function takes the current state } // (default action always returns current) } -function view(signal, model, root) { - empty(root); // clear root element before - [ // Store DOM nodes in an array +function view(model, signal) { + return container([ // Store DOM nodes in an array button('+', signal, Inc), // then iterate to append them div('count', model), // 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+ + ]); // 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 @@ -28,10 +27,11 @@ function mount(model, update, view, root_element_id) { function signal(action) { // signal function takes action return function callback() { // and returns callback model = update(action, model); // update model according to action - view(signal, model, root); // subsequent re-rendering + empty(root); + root.appendChild(view(model, signal)); // subsequent re-rendering }; }; - view(signal, model, root); // render initial model (once) + root.appendChild(view(model, signal)); // render initial model (once) } // The following are "Helper" Functions which each "Do ONLY One Thing" and are @@ -40,7 +40,7 @@ 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 @@ -66,6 +66,14 @@ function div(divid, text) { return div; } +// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section +function container(elements) { + var con = document.createElement('section'); + con.className = 'counter'; + elements.forEach(function(el) { con.appendChild(el) }); + return con; +} + /* The code block below ONLY Applies to tests run using Node.js */ /* istanbul ignore else */ if (typeof module !== 'undefined' && module.exports) { diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js index 54e3e054..0d98b492 100644 --- a/examples/todo-list/elmish.js +++ b/examples/todo-list/elmish.js @@ -1,4 +1,3 @@ -(function() { // scope elm(ish) functions to prevent conflicts if used elsewhere /** * `empty` the contents of a given DOM element "node" (before re-rendering). * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249 @@ -8,7 +7,7 @@ * const node = document.getElementById('app'); * empty(node); */ -function empty(node) { +function empty (node) { while (node.lastChild) { node.removeChild(node.lastChild); } @@ -21,18 +20,18 @@ function empty(node) { * @param {Function} view function that renders HTML/DOM elements with model. * @param {String} root_element_id root DOM element in which the app is mounted */ -function mount(model, update, view, root_element_id) { +function mount (model, update, view, root_element_id) { var root = document.getElementById(root_element_id); // root DOM element function signal(action) { // signal function takes action return function callback() { // and returns callback var updatedModel = update(action, model); // update model for the action localStorage.setItem('elmish_store', JSON.stringify(updatedModel)); empty(root); // clear root el before rerender - view(signal, updatedModel, root); // subsequent re-rendering + root.appendChild(view(updatedModel, signal)); // subsequent re-rendering }; }; model = JSON.parse(localStorage.getItem('elmish_store')) || model; - view(signal, model, root); // render initial model (once) + root.appendChild(view(model, signal)) // render initial model (once) localStorage.setItem('elmish_store', JSON.stringify(model)); // save model! } @@ -58,7 +57,7 @@ function add_attributes (attrlist, node) { case 'checked': node.checked = (a[1] === 'true' ? true : false); case 'class': - node.className = a[1]; // apply CSS classes + node.className = a[1]; // apply one or more CSS classes break; case 'data-id': node.setAttribute('data-id', a[1]); // add data-id e.g: to