使用jQuery slideUp / slideDown在Knockout自定义绑定中的奇怪行为

Question

我需要使用Knockout控制一些可折叠面板（面板的数量是可变的，但在会话期间它不会改变）。

我已经在布尔数组中设置了面板状态（打开/关闭），我使用自定义绑定来显示/隐藏jQuery动画面板：

ko.bindingHandlers.collapse = {
    update: function (element, valueAccessor) {
        if (valueAccessor()) {
            $(element).slideDown();
        } else {
            $(element).slideUp();
        }
    }
};

如果我以这种方式定义数组，那么每一步都可以工作：

myModel.collapseOpened = ko.observableArray([
    ko.observable(true),
    ko.observable(false),
    ko.observable(false)
]);

Working fiddle

但我不需要所有这些可观察的，所以我会用这种方式定义数组：

myModel.collapseOpened = ko.observable([
    true,false,false
]);

但是，如果我这样做，jQuery有一个奇怪的行为：display: none设置和取消设置但没有动画，除了最后一个面板上的slideup() （!! ！）

(Not) Working fiddle

每个人都能解释一下为什么？谢谢！

Answer 1

Knockout只会记录可观察值的变化。您不需要所有嵌套的observable，observableArray中的值会自动执行。以下工作完美。

myModel.collapseOpened = ko.observableArray([ true,false,false ]);

你不能使用observable存储数组，因此这就是observableArrays存在的原因......