Properties now change their value if an array is modified. Properties don't invoke any callbacks if the value hasn't actually changed. And a few other improvements.

ignite-html.js

@@ -40,6 +40,11 @@ class IgniteProperty {
             return;
         }
 
+        //If the current value is the same as the old value don't do anything.
+        if (this._value === val) {
+            return;
+        }
+
         //Get the old value
         var old = this._value;
 
@@ -60,15 +65,8 @@ class IgniteProperty {
         //Attempt to patch the value if it's an array.
         this.patchArray();
 
-        //If we want to reflect the value then bubble it up.
-        if (reflect) {
-            this.ignoreValueChange = true; //Ignore changes incase we are connected to any reflected properties.
-            this.reflected.forEach(reflect => reflect instanceof Function ? reflect(val) : (reflect.value = val));
-            this.ignoreValueChange = false;
-        }
-
         //Invoke any callbacks letting them know the value changed.
-        this.invokeOnChange(old, val);
+        this.invokeOnChange(old, val, reflect);
     }
 
     patchArray() {
@@ -140,8 +138,8 @@ class IgniteProperty {
                 return callback;
             }
 
-            this._value.attachonSplice = function (func) {
+            this._value.attachOnSplice = function (func) {
-                var callback = new IgniteCallback(func, detach => this.detachonSplice(detach));
+                var callback = new IgniteCallback(func, detach => this.detachOnSplice(detach));
                 this.onSpliceCallbacks.push(callback);
                 return callback;
             }
@@ -162,7 +160,7 @@ class IgniteProperty {
                 this.onShiftCallbacks = this.onShiftCallbacks.filter(shift => shift != callback);
             }
 
-            this._value.detachonSplice = function (callback) {
+            this._value.detachOnSplice = function (callback) {
                 this.onSpliceCallbacks = this.onSpliceCallbacks.filter(slice => slice != callback);
             }
         }
@@ -173,43 +171,67 @@ class IgniteProperty {
             this.arrayCallbacks.push(this._value.attachOnPop(() => this.invokeOnPop()));
             this.arrayCallbacks.push(this._value.attachOnShift(() => this.invokeOnShift()));
             this.arrayCallbacks.push(this._value.attachOnUnshift((items) => this.invokeOnUnshift(items)));
-            this.arrayCallbacks.push(this._value.attachonSplice((start, deleteCount, items) => this.invokeonSplice(start, deleteCount, items)));
+            this.arrayCallbacks.push(this._value.attachOnSplice((start, deleteCount, items) => this.invokeOnSplice(start, deleteCount, items)));
         }
     }
 
-    invokeOnChange(oldValue, newValue) {
+    reflect() {
+        this.ignoreValueChange = true; //Ignore changes incase we are connected to any reflected properties.
+        this.reflected.forEach(reflect => reflect instanceof Function ? reflect(this._value) : (reflect.value = this._value));
+        this.ignoreValueChange = false;
+    }
+
+    invokeOnChange(oldValue, newValue, reflect = true) {
         //Enter a new rendering context since this event may contain code that expects a new context.
         IgniteRenderingContext.push();
+        if (reflect) {
+            this.reflect();
+        }
         this.onChangeCallbacks.forEach(callback => callback.invoke(oldValue, newValue));
         IgniteRenderingContext.pop();
     }
 
-    invokeOnPush(items) {
+    invokeOnPush(items, reflect = true) {
         IgniteRenderingContext.push();
+        if (reflect) {
+            this.reflect();
+        }
         this.onPushCallbacks.forEach(callback => callback.invoke(this._value, items));
         IgniteRenderingContext.pop();
     }
 
-    invokeOnPop() {
+    invokeOnPop(reflect = true) {
         IgniteRenderingContext.push();
+        if (reflect) {
+            this.reflect();
+        }
         this.onPopCallbacks.forEach(callback => callback.invoke(this._value));
         IgniteRenderingContext.pop();
     }
 
-    invokeOnShift() {
+    invokeOnShift(reflect = true) {
         IgniteRenderingContext.push();
+        if (reflect) {
+            this.reflect();
+        }
         this.onShiftCallbacks.forEach(callback => callback.invoke(this._value));
         IgniteRenderingContext.pop();
     }
 
-    invokeOnUnshift(items) {
+    invokeOnUnshift(items, reflect = true) {
         IgniteRenderingContext.push();
+        if (reflect) {
+            this.reflect();
+        }
         this.onUnshiftCallbacks.forEach(callback => callback.invoke(this._value, items));
         IgniteRenderingContext.pop();
     }
 
-    invokeonSplice(start, deleteCount, items) {
+    invokeOnSplice(start, deleteCount, items, reflect = true) {
         IgniteRenderingContext.push();
+        if (reflect) {
+            this.reflect();
+        }
         this.onSpliceCallbacks.forEach(callback => callback.invoke(this._value, start, deleteCount, items));
         IgniteRenderingContext.pop();
     }
@@ -245,7 +267,7 @@ class IgniteProperty {
     }
 
     attachOnSplice(onSplice) {
-        var callback = new IgniteCallback(onSplice, detach => this.detachonSplice(detach));
+        var callback = new IgniteCallback(onSplice, detach => this.detachOnSplice(detach));
         this.onSpliceCallbacks.push(callback);
         return callback;
     }
@@ -270,7 +292,7 @@ class IgniteProperty {
         this.onUnshiftCallbacks = this.onUnshiftCallbacks.filter(unshift => unshift != callback);
     }
 
-    detachonSplice(callback) {
+    detachOnSplice(callback) {
         this.onSpliceCallbacks = this.onSpliceCallbacks.filter(slice => slice != callback);
     }
 }

ignite-template.js

@@ -211,7 +211,13 @@ class IgniteTemplate {
         }
 
         if (value instanceof IgniteProperty) {
-            this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name, converter)));
+            this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(name, (converter != null ? converter(newValue) : newValue))));
+            this._callbacks.push(value.attachOnPush((list, items) => this.onPropertyChanged(name, (converter != null ? converter(list) : list))));
+            this._callbacks.push(value.attachOnUnshift((list, items) => this.onPropertyChanged(name, (converter != null ? converter(list) : list))));
+            this._callbacks.push(value.attachOnPop((list) => this.onPropertyChanged(name, (converter != null ? converter(list) : list))));
+            this._callbacks.push(value.attachOnShift((list) => this.onPropertyChanged(name, (converter != null ? converter(list) : list))));
+            this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onPropertyChanged(name, (converter != null ? converter(list) : list))));
+
             this._properties[name] = {
                 value: (converter != null ? converter(value.value) : value.value),
                 reflect: (reflect == true ? value : null)
@@ -1005,19 +1011,11 @@ class IgniteTemplate {
     /**
      * Called when a property on this template was changed and needs to be updated
      * on the template's element.
-     * @param {any} oldValue 
-     * @param {any} newValue 
      * @param {string} propertyName 
-     * @param {Function} converter
+     * @param {any} newValue
      * @ignore
      */
-    onPropertyChanged(oldValue, newValue, propertyName, converter) {
+    onPropertyChanged(propertyName, newValue) {
-        if (converter !== null) {
-            IgniteRenderingContext.push();
-            newValue = converter(newValue);
-            IgniteRenderingContext.pop();
-        }
-
         if (this.element) {
             //Use the set value function and don't reflect the change because it came from above which
             //would be the reflected property, this reduces some functions being called twice that don't need to be.