Flash/Flex-like CreateJS 中的数据绑定

Question

也许有人知道在 CreateJS 中实现数据绑定的最佳方式？例如。当 ClassA 中的属性更改调用 ClassB 中的某些侦听器函数时？

在 Flash(Flex) 中，可以使用一些元标记来告诉编译器哪些属性应该用作可绑定的。之后，编译器在编译过程中对代码进行了一些更改（例如将所需的属性包装到 get/set 方法中，并且在 set 方法中具有调度事件功能）。

我们在 CreateJS 中有类似的东西吗？

它在 AS3 中的工作原理（一个非常简单的例子）：

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

JavaScript 或 CreateJS 中没有与 [Bindable] Flex 元标记相近的东西。

将来，Object.observe() 可能与 Flex 的 bindSetter 非常接近。

现在您可以使用 getter/setter 属性在属性更改时调用回调。 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);
}

现在您可以使用与 Flex 类似的方式使用 bindSetter：

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";

应该输出：

Initial value: Aaron

Callback: Joe

Another callback: Joe

绑定到 DOM 元素值是另一个问题，因为它们的行为与常规 JavaScript 对象不同。当然，有许多 JS 框架可以完成与 DOM 元素的数据绑定，例如 Angular、Backbone、Knockout 等。尝试将其他框架与不过是 CreateJS。

更新： An equivalent unbindSetter 可以按如下方式完成：

function unbindSetter(host, property, callback){
    var bindings = host[property + "_bindings"];
    if(bindings){
        var index = bindings.indexOf(callback);
        if(index > -1){
            bindings.splice(index, 1);
        }
    }
}

现在您可以删除之前添加的回调：

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

Flash/Flex-like CreateJS 中的数据绑定

Flash/Flex-like data binding in CreateJS

actionscript-3

flash

apache-flex

data-binding

createjs