更改可观察数组会改变自定义绑定处理程序的可见性，knockoutjs答案

【问题标题】：Changing observable array alters visibility of custom binding handler, knockoutjs更改可观察数组会改变自定义绑定处理程序的可见性，knockoutjs
【发布时间】：2013-12-02 21:58:58
【问题描述】：

更新： JSFiddle http://jsfiddle.net/OrganicCat/CjH87/6/

我有一个由普通可观察数组填充的区域，当单击按钮时，会进行异步服务调用，重新填充该数组，但包含更多数据。

这也会导致隐藏的 dom 元素显示并在那里显示一些数组数据。

在可观察数组数据更新之前一切正常，它关闭了隐藏的 dom 元素。正是 Knockout.js(library) 中的这个事件触发了它：

// Ignore writes if the value hasn't changed
    if ((!observable['equalityComparer']) || !observable['equalityComparer'](_latestValue, arguments[0])) {
    observable.valueWillMutate();
    _latestValue = arguments[0];
    if (DEBUG) observable._latestValue = _latestValue;
    observable.valueHasMutated(); // This event HERE

有没有办法防止这种情况关闭自定义绑定？绑定中的任何东西都会导致这种情况吗？这是我的自定义绑定处理程序：

ko.bindingHandlers.expandAmenities = {
                init: function (element) {
                    $('.expandable.closed').hide();
                    $('.itineraryRowMain .t-go .toggle-expand-rowAmenities').unbind('click').on('click', function (e) {

                        var $itin_body = $(this).closest('.module-admin-group');
                        if ($itin_body.hasClass('closed')) {
                            $(this).parent().parent().next().show();
                            self.bindAmenities(); // Bind amenity details on open
                            //$(this).children().html('-');
                        } else {
                            $(this).parent().parent().next().hide();
                            //$(this).children().html('+');
                        }
                        $itin_body.toggleClass('open closed');
                    });
                }
            };

总而言之，展开区域有一个可点击的元素，可以显示更多数据。当这更新数组时（只是一个普通的 self.listofStuff(arr);），这会导致新区域再次被隐藏。

【问题讨论】：

似乎是您遇到的一个非常具体的问题 - 考虑创建一个 jsFiddle 来复制该问题，以便其他人可以看到可能导致您的问题的原因。
似乎问题是特定于在使用该数组生成 DOM 元素时更新数组。当对元素进行更改时，它会将 DOM 重新绘制到初始状态。我在顶部添加了一个小提琴

标签： javascript arrays knockout.js

【解决方案1】：

我已经找到答案了。所以问题是，如果您绑定一个生成 DOM 元素（如列表或其他）的数组，并且您在该数组中有想要更新的元素，而无需执行 .push 并且不使用 self.myArray(newArray ) 那么你必须在数组中使用一个可观察的变量并更新它。

当您修改 observable 时，它不会重绘整个数组，从而使您动态更改的元素（如 DOM 数组中的可见/隐藏 div）保持在相同状态（如果它们被 jQuery 或其他方式更改）。

【讨论】：