Flash/Flex-like data binding in CreateJS - actionscript-3

Question

Maybe somebody knows about the best way to implement data binding in CreateJS? E.g. when changes of properties in ClassA call some listener-functions in ClassB ?
In Flash(Flex) it's possible to use some meta-tags to tell compiler which properties should be used as bindable. After that, during compilation compiler makes some changes in the code (e.g. wraps the required properties into get/set methods, and in the set methods there are dispatching events functionality).
Do we have something similar in CreateJS?
How it works in AS3 (a very simple example):
public class ClassA
{
[Bindable]
public var bindableProperty:String;
}
public class ClassB
{
protected var classA:ClassA;
public function GameModel()
{
this.classA = new ClassA();
BindingUtils.bindSetter(this.bindingCallback, this.classA, "bindableProperty");
}
public function bindingCallback()
{
// Do something after binding callback
}
}

Answer 1

There's no near equivalent to the [Bindable] Flex meta-tag in JavaScript or CreateJS.
In the future, Object.observe() could be a close equivalent to Flex's bindSetter.
For now you can use getter/setter properties to invoke callbacks when properties are changed. Here's a simple example:
function bindSetter(host, property, callback) {
if(!host[property + "_bindings"]){
host[property + "_bindings"] = [];
host["_" + property] = host[property];
Object.defineProperty(host, property, {
get: function() {
return host["_" + property];
},
set: function(newValue) {
host["_" + property] = newValue;
host[property + "_bindings"].forEach(function(callback){
callback(newValue);
});
}
});
}
host[property + "_bindings"].push(callback);
}
Now you can use bindSetter in a similar way to Flex:
var user = { name: "Aaron" }
bindSetter(user, "name", function(newValue){
log("Callback: " + newValue);
});
bindSetter(user, "name", function(newValue){
log("Another callback: " + newValue);
});
log("Initial value: " + user.name);
user.name = "Joe";
Should output:
Initial value: Aaron
Callback: Joe
Another callback: Joe
Binding to DOM element values is another problem, though, as they do not behave the same as regular JavaScript objects. Of course, there are many JS frameworks out there to accomplish data-binding with DOM elements, like Angular, Backbone, Knockout, etc. Mileage will vary when trying to mix other frameworks with CreateJS, though.
Update:
An equivalent unbindSetter could be done as follows:
function unbindSetter(host, property, callback){
var bindings = host[property + "_bindings"];
if(bindings){
var index = bindings.indexOf(callback);
if(index > -1){
bindings.splice(index, 1);
}
}
}
Now you can remove a callback that was previously added:
var user = { name: "Aaron" }
bindSetter(user, "name", myCallback);
function myCallback(newValue){
alert("Callback: " + newValue);
}
user.name = "Joe"; // alerts "Callback: Joe"
unbindSetter(user, "name", myCallback);
user.name = "Bob"; // no alert