Added variable function to be able to add variables to an ignite template.

ignite-template.js

@@ -30,6 +30,7 @@ class IgniteTemplate {
         this._attributes = {};
         this._classes = [];
         this._properties = {};
+        this._variables = {};
         this._reflecting = {};
         this._refs = [];
         this._callbacks = [];
@@ -209,7 +210,7 @@ class IgniteTemplate {
     }
 
     /**
-     * Adds a property to this template to be added once this template is constructed.
+     * Sets a property on the element this template will construct.
      * @param {String} name Name of the property to set.
      * @param {Any|IgniteProperty} value Value of the property to use. If a Property is passed the value will auto update.
      * @param {Boolean} reflect If true whenever this property is changed it's value will be passed back to the Property that was passed as value if one was passed.
@@ -250,6 +251,41 @@ class IgniteTemplate {
         return this;
     }
 
+    /**
+     * Sets a variable on the element this template will construct.
+     * @param {String} name Name of the variable to set
+     * @param {Any|IgniteProperty} value Value of the variable to set
+     * @param {Function} converter Optional function that can be used to convert the value if needed.
+     * @returns This ignite template so function calls can be chained.
+     */
+    variable(name, value, converter = null) {
+        IgniteRenderingContext.push();
+
+        if (this._variables[name]) {
+            throw `Attempted to set a variable twice on a IgniteTemplate: ${this.tagName}. This is not allowed and should be avoided.`;
+        }
+
+        if (value instanceof IgniteProperty) {
+            this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onVariableChanged(name, (converter != null ? converter(newValue) : newValue))));
+            this._callbacks.push(value.attachOnPush((list, items) => this.onVariableChanged(name, (converter != null ? converter(list) : list))));
+            this._callbacks.push(value.attachOnUnshift((list, items) => this.onVariableChanged(name, (converter != null ? converter(list) : list))));
+            this._callbacks.push(value.attachOnPop((list) => this.onVariableChanged(name, (converter != null ? converter(list) : list))));
+            this._callbacks.push(value.attachOnShift((list) => this.onVariableChanged(name, (converter != null ? converter(list) : list))));
+            this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onVariableChanged(name, (converter != null ? converter(list) : list))));
+
+            this._variables[name] = {
+                value: (converter != null ? converter(value.value) : value.value)
+            };
+        } else {
+            this._variables[name] = {
+                value: (converter != null ? converter(value) : value)
+            };
+        }
+
+        IgniteRenderingContext.pop();
+        return this;
+    }
+
     /**
      * Makes a property on this template reflect its value back to the given target.
      * (You can reflect a property more than once if it's needed.)
@@ -851,6 +887,12 @@ class IgniteTemplate {
             }
         }
 
+        //Set the variables on this element.
+        var keys = Object.keys(this._variables);
+        for (var i = 0; i < keys.length; i++) {
+            this.element[keys[i]] = this._variables[keys[i]].value;
+        }
+
         //Setup any reflecting properties on this element
         var keys = Object.keys(this._reflecting);
         for (var i = 0; i < keys.length; i++) {
@@ -1047,6 +1089,20 @@ class IgniteTemplate {
         this._properties[propertyName].value = newValue;
     }
 
+    /**
+     * Called when a variable on this template was changed and needs to be updated.
+     * @param {string} variableName 
+     * @param {any} newValue 
+     * @ignore
+     */
+    onVariableChanged(variableName, newValue) {
+        if (this.element) {
+            this.element[variableName] = newValue;
+        }
+
+        this._variables[variableName].value = newValue;
+    }
+
     /**
      * Called when the inner html for this template was changed and needs to be updated
      * on the template's element.