From bfca6d48e6d143ba0ecc686739cd2fc06e2d45a1 Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Thu, 30 Jul 2020 09:58:47 -0700
Subject: [PATCH] You can now have multiple callbacks for a single event, and
 we now pass back the template for any element we construct.

---
 src/ignite-template.js | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/ignite-template.js b/src/ignite-template.js
index 8f0e662..17fc0af 100644
--- a/src/ignite-template.js
+++ b/src/ignite-template.js
@@ -125,11 +125,15 @@ class IgniteTemplate {
      * @param {Any} func 
      */
     on(eventName, func) {
+        if (!this.events[eventName]) {
+            this.events[eventName] = [];
+        }
+
         if (func instanceof IgniteProperty) {
             this.callbacks.push(func.attach((oldValue, newValue) => this.onEventChanged(oldValue, newValue, eventName)));
-            this.events[eventName] = func.value;
+            this.events[eventName].push(func.value);
         } else {
-            this.events[eventName] = func;
+            this.events[eventName].push(func);
         }
 
         return this;
@@ -151,11 +155,8 @@ class IgniteTemplate {
         if (!this.element) {
             this.element = window.document.createElement(this.tagName);
 
-            //If this template is creating an ignite element, pass back our template so the element
-            //can use it without having to create another one.
-            if (this.element instanceof IgniteElement) {
-                this.element.template = this;
-            }
+            //Pass back our template to the element we are creating.
+            this.element.template = this;
 
             //If the element has a onDisconnected function, attach to it
             //(This way if a custom element is removed we can deconstruct and cleanup)
@@ -185,9 +186,11 @@ 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]]);
-            }
+            this.events[keys[i]].forEach((event) => {
+                if (event !== null && event !== undefined) {
+                    this.element.addEventListener(keys[i], event);
+                }
+            });
         }
 
         //Set the properties on this element
@@ -348,7 +351,9 @@ class IgniteTemplate {
                 this.element.addEventListener(eventName, newValue);
             }
 
-            this.events[eventName] = newValue;
+            //Remove the old value from the events
+            this.events[eventName] = this.events[eventName].filter(ev => ev != oldValue);
+            this.events[eventName].push(newValue);
         }
     }
 }