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

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)
]);

工作提琴

但是我不需要所有这些可观察的东西，因此我将以这种方式定义数组：

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

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

（不）工作的小提琴

谁能解释我为什么 ？ 谢谢！

Answer 1

淘汰赛只会记录可观察值的变化。 您不需要所有嵌套的Observable，observableArray中的值将自动作用。 以下工作完美。

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

您不能使用可观察对象来存储数组，因此这就是存在可观察对象数组的原因...