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

应输出：

初始值：Aaron

回调：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

CreateJS

1 个答案: