diff --git a/ignite-html.js b/ignite-html.js
index d41a83c..c862604 100644
--- a/ignite-html.js
+++ b/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) {
- var callback = new IgniteCallback(func, detach => this.detachonSplice(detach));
+ this._value.attachOnSplice = function (func) {
+ 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);
}
}
diff --git a/ignite-template.js b/ignite-template.js
index 82553b0..4c9f9a8 100644
--- a/ignite-template.js
+++ b/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) {
- if (converter !== null) {
- IgniteRenderingContext.push();
- newValue = converter(newValue);
- IgniteRenderingContext.pop();
- }
-
+ onPropertyChanged(propertyName, newValue) {
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.