javascript - 更改可观察数组会改变自定义绑定(bind)处理程序、knockoutjs 的可见性

Question

更新: 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

有没有办法阻止关闭自定义绑定(bind)？绑定(bind)中的任何内容是否会导致此问题？这是我的自定义绑定(bind)处理程序:

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);)，这会导致新区域再次隐藏。

Answer 1

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

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