Data-binding implementation

js/dataBinding.js

@@ -1,7 +1,12 @@
 // @ts-check
 
+import { Observable, Computed } from "./observable.js"
+
+/**
+ * Class supports data-binding operations
+ */
 export class DataBinding {
-    
+
     /**
      * Simple evaluation
      * @param {string} js The JavaScript to evaluate 
@@ -16,10 +21,56 @@ export class DataBinding {
      * @param {object} context The context (data) to evaluate with
      * @returns {object} The result of the evaluation 
      */
-    executeInContext(src, context) {
+    executeInContext(src, context, attachBindingHelpers = false) {
+        if (attachBindingHelpers) {
+            context.observable = this.observable;
+            context.computed = this.computed;
+            context.bindValue = this.bindValue;
+        }
         return this.execute.call(context, src);
     }
 
+    /**
+     * A simple observable implementation
+     * @param {object} value Any value to observe
+     * @returns {Observable} The observable instance to use
+     */
+    observable(value) {
+        return new Observable(value);
+    }
+
+    /**
+     * Creates an observed computed property
+     * @param {function} calculation Calculated value 
+     * @param {Observable[]} deps The list of dependent observables
+     * @returns {Computed} The observable computed value 
+     */
+    computed(calculation, deps) {
+        return new Computed(calculation, deps);
+    }
+
+    /**
+     * Binds an input element to an observable value
+     * @param {HTMLInputElement} input The element to bind to 
+     * @param {Observable} observable The observable instance to bind to 
+     */
+    bindValue(input, observable) {
+        let initialValue = observable.value;
+        input.value = initialValue;
+        observable.subscribe(() => input.value = observable.value);
+        /**
+         * Converts the values 
+         * @param {object} value 
+         */
+        let converter = value => value;
+        if (typeof initialValue === "number") {
+            converter = num => isNaN(num = parseFloat(num)) ? 0 : num;
+        }
+        input.onkeyup = () => {
+            observable.value = converter(input.value);
+        };
+    }
+
     /**
      * Searches for "repeat" attribute to data-bind lists
      * @param {HTMLElement} elem The parent element to search 
@@ -39,12 +90,13 @@ export class DataBinding {
                 if (matches) {
                     matches.forEach(match => {
                         match = match.replace("{{", "").replace("}}", "");
-                        const value = this.executeInContext(`this.${match}`, {item});
-                        newTemplate = newTemplate.replace(`{{${match}}}`, value);                    
+                        const value = this.executeInContext(`this.${match}`, { item });
+                        newTemplate = newTemplate.replace(`{{${match}}}`, value);
                     });
                     parent.innerHTML += newTemplate;
-                }               
+                }
             });
         });
     }
-}
+}
+

js/navigator.js

@@ -117,9 +117,11 @@ export class Navigator extends HTMLElement {
      */
     get hasNext() {
         const host = this.querySelector("div");
-        const appear = host.querySelectorAll(".appear");
-        if (appear && appear.length) {
-            return true;
+        if (host) {
+            const appear = host.querySelectorAll(".appear");
+            if (appear && appear.length) {
+                return true;
+            }
         }
         return this._currentIndex < (this.totalSlides - 1);
     }

js/observable.js

@@ -0,0 +1,99 @@
+// @ts-check
+
+/**
+ * @callback ListenerCallback
+ * @param {object} newVal The new value generated
+ */
+
+/**
+ * Represents an observable value
+ */
+export class Observable {
+
+    /**
+     * Creates a new observable and initializes with a value
+     * @param {object} value 
+     */
+    constructor(value) {
+        /** 
+         * Subscriptions
+         * @type {ListenerCallback[]}
+         */
+        this._listeners = [];
+        /**
+         * The value
+         * @type {object}
+         */
+        this._value = value;
+    }
+
+    /**
+     * Notifies subscribers of new value
+     */
+    notify() {
+        this._listeners.forEach(listener => listener(this._value));
+    }
+
+    /**
+     * Subscribe to listen for changes
+     * @param {ListenerCallback} listener 
+     */
+    subscribe(listener) {
+        this._listeners.push(listener);
+    }
+
+    /**
+     * The value of the observable
+     * @returns {object} The current value
+     */
+    get value() {
+        return this._value;
+    }
+
+    /**
+     * Sets the value of the observable
+     * @param {object} val The new value
+     */
+    set value(val) {
+        if (val !== this._value) {
+            this._value = val;
+            this.notify();
+        }
+    }
+}
+
+/**
+ * Observable computed properties
+ */
+export class Computed extends Observable {
+    /**
+     * Creates a new observable and initializes with a value
+     * @param {Function} value Initial computation
+     * @param {Observable[]} deps Dependencies 
+     */
+    constructor(value, deps) {
+        super(value());
+        const listener = () => {
+            this._value = value();
+            this.notify();
+        }
+        deps.forEach(dep => dep.subscribe(listener));
+    }
+
+    /**
+     * Gets the value of the observable
+     * @returns {object} The value
+     */
+    get value() {
+        return this._value;
+    }
+
+    /**
+     * Sets the value of the observable
+     * @param {object} _ The new value
+     * @throws "Cannot set computed property"
+     */
+    set value(_) {
+        throw "Cannot set computed property";
+    }
+}

js/slide.js

@@ -65,7 +65,7 @@ export class Slide {
         // execute any scripts
         const script = this._html.querySelector("script");
         if (script) {
-            this._dataBinding.executeInContext(script.innerText, this._context);
+            this._dataBinding.executeInContext(script.innerText, this._context, true);
             this._dataBinding.bindLists(this._html, this._context);
         }
     }