From 9040bb8d45ffa205eb5066a4ee19456e94ce0bb7 Mon Sep 17 00:00:00 2001 From: MattMo Date: Sun, 24 Dec 2023 15:21:43 -0800 Subject: [PATCH] Added ability to use arrays of properties for the property function. --- ignite-template.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/ignite-template.js b/ignite-template.js index 26d0227..5eb2594 100644 --- a/ignite-template.js +++ b/ignite-template.js @@ -261,7 +261,7 @@ class IgniteTemplate { /** * 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 {Any|IgniteProperty|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. * @param {Function} converter Optional function that can be used to convert the value if needed. * @returns {IgniteTemplate} This ignite template so function calls can be chained. @@ -289,6 +289,28 @@ class IgniteTemplate { value: (converter != null ? converter(value.value) : value.value), reflect: (reflect == true ? value : null) }; + } else if (Array.isArray(value) && value.length > 0 && value[0] instanceof IgniteProperty) { + //There must be a converter for this to work correctly + if (!converter) { + throw "Cannot pass an array of properties without using a converter!"; + } + + //Attack a callback for all the properties + value.forEach(prop => { + if (prop instanceof IgniteProperty) { + this._callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onPropertyChanged(name, converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnPush((list, items) => this.onPropertyChanged(name, converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnUnshift((list, items) => this.onPropertyChanged(name, converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnPop((list) => this.onPropertyChanged(name, converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnShift((list) => this.onPropertyChanged(name, converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onPropertyChanged(name, converter(...value.getPropertyValues())))); + } + }); + + this._properties[name] = { + value: converter(...value.getPropertyValues()), + reflect: (reflect == true ? value : null) + }; } else { this._properties[name] = { value: (converter != null ? converter(value) : value),