diff --git a/ignite-html.js b/ignite-html.js
index 80f8a13..5effb8d 100644
--- a/ignite-html.js
+++ b/ignite-html.js
@@ -463,7 +463,21 @@ Array.prototype.getOldPropertyValues = function (property, oldValue) {
* The outline of an IgniteObject which contains IgniteProperties.
*/
class IgniteObject {
- constructor() {
+ /**
+ * Creates a new ignite object with an optional object to create from.
+ * @param {Any} obj
+ */
+ constructor(obj = null) {
+ //Only do this if the object is not an ignite object already.
+ if (obj && !(obj instanceof IgniteObject)) {
+ Object.keys(obj).forEach(name => {
+ var prop = new IgniteProperty(obj[name]);
+ Object.defineProperty(this, name, {
+ get: () => { return (IgniteRendering.rendering ? prop : prop.value); },
+ set: (value) => { prop.value = value; }
+ });
+ });
+ }
}
/**
diff --git a/ignite-template.js b/ignite-template.js
index bcc2252..2ba8aa1 100644
--- a/ignite-template.js
+++ b/ignite-template.js
@@ -76,7 +76,7 @@ class IgniteTemplate {
/**
* Adds a CSS class to be added once this template is constructed.
- * @param {String|IgniteProperty} name Name of the CSS class to add. Multiple CSS classes are supported if they are separated by a space.
+ * @param {String|IgniteProperty|Function} name Name of the CSS class to add. Multiple CSS classes are supported if they are separated by a space.
* @param {Function} converter Optional function that can convert the class name into a different one.
* @example
* .class("row justify-content-center")
@@ -85,6 +85,8 @@ class IgniteTemplate {
class(name, converter = null) {
IgniteRendering.push();
+ var value = null;
+
if (name instanceof IgniteProperty) {
this._callbacks.push(name.attachOnChange((oldValue, newValue) => this.onClassChanged((converter != null ? converter(oldValue) : oldValue), (converter != null ? converter(newValue) : newValue))));
this._callbacks.push(name.attachOnPush((list, items) => this.onClassChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null))));
@@ -93,12 +95,7 @@ class IgniteTemplate {
this._callbacks.push(name.attachOnShift((list) => this.onClassChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null))));
this._callbacks.push(name.attachOnSplice((list, start, deleteCount, items) => this.onClassChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null))));
- var value = (converter != null ? converter(name.value) : name.value);
- (value != null ? value.toString().split(" ") : []).forEach(cl => {
- if (cl.length > 0) {
- this._classes.push(cl);
- }
- });
+ value = (converter != null ? converter(name.value) : name.value);
} else if (Array.isArray(name) && name.length > 0 && name[0] instanceof IgniteProperty) {
//There must be a converter for this to work correctly
if (!converter) {
@@ -117,21 +114,19 @@ class IgniteTemplate {
}
});
- var value = converter(...name.getPropertyValues());
- (value != null ? value.toString().split(" ") : []).forEach(cl => {
- if (cl.length > 0) {
- this._classes.push(cl);
- }
- });
+ value = converter(...name.getPropertyValues());
+ } else if (name instanceof Function) {
+ value = (converter != null ? converter(name()) : name());
} else {
- var value = (converter != null ? converter(name) : name);
- (value != null ? value.toString().split(" ") : []).forEach(cl => {
- if (cl.length > 0) {
- this._classes.push(cl);
- }
- });
+ value = (converter != null ? converter(name) : name);
}
+ (value != null ? value.toString().split(" ") : []).forEach(cl => {
+ if (cl.length > 0) {
+ this._classes.push(cl);
+ }
+ });
+
IgniteRendering.pop();
return this;
}