remove select state from data and use view state instead

Author: ts-thomas

frameworks/keyed/mikado-proxy/src/data.js

@@ -27,8 +27,7 @@ export default function(store, count, append){
         store[i] = {
 
             "id": nextId++,
-            "label": ADJECTIVES[random(len_ADJECTIVES)] + " " + COLOURS[random(len_COLOURS)] + " " + NOUNS[random(len_NOUNS)],
-            "class": false
+            "label": ADJECTIVES[random(len_ADJECTIVES)] + " " + COLOURS[random(len_COLOURS)] + " " + NOUNS[random(len_NOUNS)]
         };
     }
 }

frameworks/keyed/mikado-proxy/src/main.js

@@ -10,9 +10,9 @@ Mikado.once(document.body, tpl_app).eventCache = true;
 // This implementation is using a full reactive paradigm.
 // It just applies changes to the store like an Array.
 
-let selected;
+const state = {};
 const store = new Array();
-const view = new Mikado(tpl_item, { mount: document.getElementById("tbody"), observe: store });
+const view = new Mikado(tpl_item, { mount: document.getElementById("tbody"), observe: store, state });
 const event = { stop: true };
 
 route("run", () => assignData(store, 1000), event);
@@ -30,8 +30,8 @@ route("swaprows", () => {
 }, event);
 route("remove", target => store.splice(view.index(target), 1), event);
 route("select", target => {
-    selected >= 0 && (store[selected].class = "");
-    selected = view.index(target);
-    /** @export */
-    store[selected].class = "danger";
+    const current = state.selected;
+    state.selected = view.index(target);
+    current >= 0 && view.update(current, store[current]);
+    view.update(state.selected, store[state.selected]);
 }, event);

frameworks/keyed/mikado-proxy/src/template/item.html

@@ -1,4 +1,4 @@
-<tr key="id" cache="true" class="{{=data.class}}" root>
+<tr key="id" cache="true" class="{{ state.selected === index ? 'danger' : '' }}" root>
     <td class="col-md-1">{{=data.id}}</td>
     <td class="col-md-4">
         <a class="lbl" click="select:root">{{=data.label}}</a>

frameworks/keyed/mikado/src/main.js

@@ -34,5 +34,5 @@ route("select", target => {
     const current = state.selected;
     state.selected = view.index(target);
     current >= 0 && view.update(current, data[current]);
-    view.update(target, data[state.selected]);
+    view.update(state.selected, data[state.selected]);
 }, event);

frameworks/non-keyed/mikado/src/main.js

@@ -16,7 +16,7 @@ const event = { stop: true };
 
 route("run", () => view.render(data = buildData(1000)), event);
 route("runlots", () => view.render(buildData(10000)), event);
-route("add", () => view.append(buildData(1000)), event);
+route("add", () => view.append(data = buildData(1000)), event);
 route("update", () => {
     for(let i = 0; i < data.length; i += 10){
         data[i].label += " !!!";
@@ -34,5 +34,5 @@ route("select", target => {
     let current = state.selected;
     state.selected = view.index(target);
     current >= 0 && view.update(current, data[current]);
-    view.update(target, data[state.selected]);
+    view.update(state.selected, data[state.selected]);
 }, event);