Add declarative data-binding

js/dataBinding.js

@@ -71,6 +71,30 @@ export class DataBinding {
         };
     }
 
+    /**
+     * 
+     * @param {HTMLElement} elem The parent element 
+     * @param {object} context The context to use for binding 
+     */
+    bindAll(elem, context) {
+        this.bindLists(elem, context);
+        this.bindObservables(elem, context);
+    }
+
+    /**
+     * Searches for "data-bind" attribute to data-bind observables
+     * @param {HTMLElement} elem The parent element to search 
+     * @param {object} context The context to use for binding 
+     */
+    bindObservables(elem, context) {
+        const dataBinding = elem.querySelectorAll("[data-bind]");
+        dataBinding.forEach(elem => {
+            this.bindValue(
+                /** @type {HTMLInputElement} */(elem), 
+                context[elem.getAttribute("data-bind")]);
+        });
+    }
+    
     /**
      * Searches for "repeat" attribute to data-bind lists
      * @param {HTMLElement} elem The parent element to search 

js/slide.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-import {DataBinding} from "./dataBinding.js"
+import { DataBinding } from "./dataBinding.js"
 
 /** 
  * Represents a slide 
@@ -21,7 +21,7 @@ export class Slide {
          * Context for embedded scripts
          * @type {object}
          */
-        this._context = {};
+        this._context = { };
         /**
          * Data binding helper
          * @type {DataBinding}
@@ -66,7 +66,7 @@ export class Slide {
         const script = this._html.querySelector("script");
         if (script) {
             this._dataBinding.executeInContext(script.innerText, this._context, true);
-            this._dataBinding.bindLists(this._html, this._context);
+            this._dataBinding.bindAll(this._html, this._context);
         }
     }