MontoyaTech/ignite-html
MontoyaTech/ignite-html
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Matt Mo 2021-03-28 23:23:58 -07:00
parent f49aad478c
commit d3ae384634
1 changed files with 57 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
ignite-template.js
View File

@ -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.