Added events to templates so that we can use properties or functions and have them setup on the constructed element for us.

src/ignite-template.js

@@ -12,6 +12,7 @@ class IgniteTemplate {
         this.properties = {};
         this.refs = [];
         this.callbacks = [];
+        this.events = {};
 
         if (items) {
             for (var i = 0; i < items.length; i++) {
@@ -118,6 +119,22 @@ class IgniteTemplate {
         return this;
     }
 
+    /**
+     * Adds a event by its name and the func to invoke once the event fires.
+     * @param {String} eventName 
+     * @param {Any} func 
+     */
+    on(eventName, func) {
+        if (func instanceof IgniteProperty) {
+            this.callbacks.push(func.attach((oldValue, newValue) => this.onEventChanged(oldValue, newValue, eventName)));
+            this.events[eventName] = func.value;
+        } else {
+            this.events[eventName] = func;
+        }
+
+        return this;
+    }
+
     /**
      * Constructs this template and adds it to the DOM if this template
      * has not already been constructed.
@@ -165,6 +182,14 @@ class IgniteTemplate {
             }
         }
 
+        //Set the events on this element
+        var keys = Object.keys(this.events);
+        for (var i = 0; i < keys.length; i++) {
+            if (this.events[keys[i]] !== null) {
+                this.element.addEventListener(keys[i], this.events[keys[i]]);
+            }
+        }
+
         //Set the properties on this element
         var keys = Object.keys(this.properties);
         for (var i = 0; i < keys.length; i++) {
@@ -192,6 +217,16 @@ class IgniteTemplate {
      */
     deconstruct() {
         console.log(`Deconstructing ${this.tagName}`);
+
+        //Remove and disconnect all events
+        if (this.element && this.events) {
+            var keys = Object.keys(this.events);
+            for (var i = 0; i < keys.length; i++) {
+                this.element.removeEventListener(keys[i], this.events[keys[i]]);
+            }
+            this.events = null;
+        }
+
         //Remove our element if we have one.
         if (this.element) {
             this.element.remove();
@@ -294,6 +329,28 @@ class IgniteTemplate {
             ref.value = this.element;
         }
     }
+
+    /**
+     * Called when a event was changed and we need to update it.
+     * @param {any} oldValue 
+     * @param {any} newValue 
+     * @param {any} eventName 
+     */
+    onEventChanged(oldValue, newValue, eventName) {
+        console.log(`Event changed: ${eventName}`);
+
+        if (this.element) {
+            if (oldValue !== null && oldValue !== undefined) {
+                this.element.removeEventListener(eventName, oldValue);
+            }
+
+            if (newValue !== null && newValue !== undefined) {
+                this.element.addEventListener(eventName, newValue);
+            }
+
+            this.events[eventName] = newValue;
+        }
+    }
 }
 
 class div extends IgniteTemplate {

src/sheet.js

@@ -11,7 +11,8 @@ class Sheet extends IgniteElement {
             show: false,
             items: ["1", "2"],
             href: "www.google.com",
-            name: "default content"
+            name: "default content",
+            linkClick: this.onClick
         };
     }
 
@@ -27,10 +28,17 @@ class Sheet extends IgniteElement {
                     new html("<h2>this is after</h2>"),
                     new html("<h3>---- begin sheet's slot ----<h3>"),
                     new slot(this),
-                    new html("<h3>---- end of slot ----</h3>")
+                    new html("<h3>---- end of slot ----</h3>"),
+                    new a("I go nowhere, but you can click me ;)").on("click", this.linkClick)
                 )
             );
     }
+
+    onClick(event) {
+        console.log("Element was clicked!");
+        console.log("Event:");
+        console.log(event);
+    }
 }
 
 class SheetTemplate extends IgniteTemplate {