Alright, if I can resist the urge to be neurotic about continuing to work on the same code, then this should be my last post. I've left a couple TODO comments in that will be left to the reader (and myself as I continue to use this in development) but there
isn't an immediately clear answer to me on them.
With the shift to the C# object being the backing data of the binding, I ran into trouble with extending the
JSBindingBridge with code like the following: ("source" needs binding notifications)
var ObservableDocument = WinJS.Class.mix(JSBindingBridge, WinJS.Binding.expandProperties({
key: null,
group: null,
source: null,
}));
In short, the collision came between JavaScript object backing (extensible) and C# object backing (non-extensible). My answer:
mimic WinJS.Binding.mixin and split the backing data to a second object. (Contrast this with my first offering that set up a 2-way binding to a second object, this acts directly on the C# now that I have a better understanding of how
the binding mixin works)
A couple other additions:
- "coreBackingData" can be set multiple times on the same bridge, and it will reset its state (if I've actually written that properly. I don't yet have a scenario where this is necessary)
- Rather than being defined on a base object, the necessary code has been pulled out into a mixin that should be reasonably simple to include in other objects. (I haven't actually tried this part)
var coreObjectMixin = {
coreBackingData: {
//We don't define a getter method because we want to force access through the properties we will define on the JavaScript object
set: function (newData) {
var oldData = this._coreBackingData;
if (newData !== oldData) {
var oldProps = this._coreProperties;
//Cleanup values from the old data
if (oldData) {
//Remove core change listener
oldData.removeEventListener && oldData.removeEventListener("propertychanged", this.coreChangeHandler);
//Remove properties of the old data
//TODO - do we need to notify binding listeners?
for (var op in oldProps)
delete this[op];
}
if (newData) {
//Set values to our containers
this._coreBackingData = newData;
this._coreProperties = WinJS.Binding.expandProperties(newData);
//Listen to changes from the core object
newData.addEventListener && newData.addEventListener("propertychanged", this.coreChangeHandler);
var newProps = this._coreProperties;
//Initialize our object properties
//TODO - do we need to notify binding listeners?
for (var prop in newProps) {
this.defineProperty.call(this, prop);
}
} else {
this._coreBackingData = {};
this._coreProperties = {};
}
}
},
},
getCoreProperty: function (name) {
var data = this._coreBackingData[name];
//Functions must be called in the context of the backing object
if (typeof data == 'function')
return data.bind(this._coreBackingData);
//TODO: The dynamicObservableMixin returns WinJS.Binding.as(data), but that would break if we return a C# object.
// We need to return something bindable if it's not a value primitive.
return data;
},
setCoreProperty: function (name, value) {
var oldValue = this._coreBackingData[name];
if (oldValue !== value) {
this._coreBackingData[name] = value;
//While the C# will also notify on this change, this is designed to be flexible enough for JavaScript objects as well
return this.notify(name, value);
}
return WinJS.Promise.as();
},
defineProperty: function (name) {
if (!this[name]) {
Object.defineProperty(this,
name, {
get: function () { return this.getCoreProperty(name); },
set: function (value) { this.setCoreProperty(name, value); },
enumerable: true,
configurable: true
}
);
}
},
coreChangeHandler: {
get: function () {
//Define the C# property changed handler
if (!this._coreChangeHandler) {
this._coreChangeHandler = function(changeEvent) {
var propname = changeEvent.detail[0].toLowerCase();
for (var p in this._coreProperties) {
//WinRT doesn't allow properties/methods to differ only by case, so we're safe to do a case insensitive match to get around the casing rules in JavaScript
if (p.toLowerCase() == propname) {
this.notify(p, this[p]);
break;
}
}
}.bind(this);
}
return this._coreChangeHandler;
}
},
};
var JSBindingBridge = WinJS.Class.mix(function (coreObj = null) {
this._initObservable();
this.coreBackingData = coreObj;
}, WinJS.Binding.mixin, coreObjectMixin);
Adam
