0

我正在尝试修改此页面class上显示的绑定：

ko.bindingHandlers['class'] = {
    'update': function(element, valueAccessor) {
        if (element['__ko__previousClassValue__']) {
            ko.utils.toggleDomNodeCssClass(element, element['__ko__previousClassValue__'], false);
        }
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.utils.toggleDomNodeCssClass(element, value, true);
        element['__ko__previousClassValue__'] = value;
    }
};

所以，目前，我的是这样的：

ko.bindingHandlers.cssClass = {
    update: function (element, valueAccessor) {
        var cssClass = ko.utils.unwrapObservable(valueAccessor()),
            prevCssClass = element['__ko__previousClassValue__'];

        console.log("Previous:", prevCssClass);
        console.log("Current:", cssClass);

        if (Object.prototype.toString.call(prevCssClass) === '[object Array]') {
            ko.utils.arrayForEach(prevCssClass, function (classAccessor) {
                var value = ko.utils.unwrapObservable(classAccessor);
                ko.utils.toggleDomNodeCssClass(element, value, false);
            });
        } else if (prevCssClass) {
            ko.utils.toggleDomNodeCssClass(element, prevCssClass, false);
        }

        if (Object.prototype.toString.call(cssClass) === '[object Array]') {
            ko.utils.arrayForEach(cssClass, function (classAccessor) {
                var value = ko.utils.unwrapObservable(classAccessor);
                ko.utils.toggleDomNodeCssClass(element, value, true);
            });
        } else if (cssClass) {
            ko.utils.toggleDomNodeCssClass(element, cssClass, true);
        }

        element['__ko__previousClassValue__'] = cssClass;
    }
};

我创建了一个你可以玩的小提琴。我的问题是，第一次单击“更改”时，这就像一个魅力，但在那之后的任何时候，对于可观察数组prevCssClass来说都是不正确的（单个效果很好）......它反映了实际上不应该是以前的值. 为什么？我不知道为什么会这样，对我来说一切都很好。multiplecssClass

错误的控制台输出是：

Previous: undefined
Current: ["blue","small"]

Previous: ["blue"]
Current: ["blue"]

Previous: ["blue","big"]
Current: ["blue","big"]

正确的输出应该是：

Previous: undefined
Current: ["blue","small"]

Previous: ["blue","small"]
Current: ["blue"]

Previous: ["blue"]
Current: ["blue","big"]

我正在 Chrome 中进行测试。

更新：

答案如下。如果你有兴趣，这个新绑定的要点在这里（全部清理）：

https://gist.github.com/kamranayub/5224521

4

1 回答 1

1

这是我在某处捡到的一个 javascript 小技巧……也许是 jQuery 的源代码，我不记得了。

关键是创建数组的副本。使用.concat()基本上附加一个空数组会强制 Javascript 创建现有数组的副本。

if (Object.prototype.toString.call(prevCssClass) === '[object Array]') {
    prevCssClass = prevCssClass.concat();

这允许您存储当前数组的历史副本。对原始对象的任何修改都不会影响您的“克隆”数组。

于 2013-03-22T20:19:06.857 回答