Question

我正在尝试修改this page上显示的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;
    }
};

我可以玩created a Fiddle。我的问题是，当您第一次点击“更改”时，这就像一个魅力，但在此之后的任何时候prevCssClass都不正确 multiple可观察数组（单个效果很好）......它反映了cssClass而不是实际上应该是以前的值。为什么？我无法弄清楚为什么会发生这种情况，对我来说一切似乎都没问题。

错误的控制台输出是：

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

Answer 1

这是我在某个地方拾起的一个小技巧...也许jQuery的来源，我不记得了。

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

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

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

为Knockout创建一个接受数组的自定义CSS类绑定

更新

1 个答案: