From 1adb844c9750b2b551bebbc5bf1eb67f7fcfdf7b Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Tue, 28 Jul 2020 09:50:26 -0700
Subject: [PATCH] Added ref functionality to get a ref from any template once
 it's created. Next up is property callback cleanup and disconnection upon
 element being removed.

---
 src/ignite-template.js | 18 ++++++++++++++++++
 src/main-app.js        |  5 +++--
 src/sheet.js           |  2 +-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/ignite-template.js b/src/ignite-template.js
index f035ba6..83756e7 100644
--- a/src/ignite-template.js
+++ b/src/ignite-template.js
@@ -9,6 +9,7 @@ class IgniteTemplate {
         this.tagName = null;
         this.element = null;
         this.properties = {};
+        this.refs = [];
 
         if (items) {
             for (var i = 0; i < items.length; i++) {
@@ -64,11 +65,26 @@ class IgniteTemplate {
         return this;
     }
 
+    ref(item) {
+        if (item instanceof IgniteProperty) {
+            this.refs.push((element) => {
+                item.value = element;
+            });
+        } else {
+            this.refs.push(item);
+        }
+
+        return this;
+    }
+
     construct(parent) {
         //Construct this element if we haven't already
         if (!this.element) {
             this.element = window.document.createElement(this.tagName);
             parent.appendChild(this.element);
+
+            //Invoke any refs we have
+            this.refs.forEach((ref) => { ref(this.element); });
         }
 
         //Set the classes on this element
@@ -116,6 +132,8 @@ class IgniteTemplate {
 
     onAttributeChanged(oldValue, newValue, attributeName) {
         console.log(`Attribute changed, oldValue: ${oldValue} newValue: ${newValue} attribute: ${attributeName}`);
+        console.log("this element:");
+        console.log(this.element);
 
         if (newValue == null || newValue == undefined) {
             this.element.removeAttribute(attributeName);
diff --git a/src/main-app.js b/src/main-app.js
index 979aedc..476cc44 100644
--- a/src/main-app.js
+++ b/src/main-app.js
@@ -15,12 +15,13 @@ class MainApp extends IgniteElement {
         return [
             "title",
             "name",
-            "href"
+            "href",
+            "sheet"
         ];
     }
 
     render() {
-        return new Sheet().property("name", this.name).property("href", this.href);
+        return new Sheet().property("name", this.name).property("href", this.href).ref(this.sheet);
     }
 }
 
diff --git a/src/sheet.js b/src/sheet.js
index 690d97e..7af86a8 100644
--- a/src/sheet.js
+++ b/src/sheet.js
@@ -26,7 +26,7 @@ class Sheet extends IgniteElement {
                 new div(
                     new html("<h2>this is before</h2>"),
                     new list(this.items, (item) => {
-                        return new html(`<h1>${item}</h1>`)
+                        return new a(`${item}`).attribute("href", this.href)
                     }),
                     new html("<h2>this is after</h2>"),
                     new a("this is a link").attribute("href", this.href)