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

Changing observable array alters visibility of custom binding handler, knockoutjs

本文关键字：程序 knockoutjs 可见性 处理 自定义 观察 数组 绑定      更新时间：2024-02-08

更新：JSFiddlehttp://jsfiddle.net/OrganicCat/CjH87/6/

我有一个区域，它由一个正常的可观察数组填充，当单击按钮时，会发出一个异步服务调用，重新填充该数组，但会有更多的数据。

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

一切都很好，直到可观察的数组数据被更新，它关闭了隐藏的dom元素。是Knockout.js（库）中的这个事件触发了它：

// 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）；）这会导致新区域再次被隐藏。

我已经找到了答案。因此，问题是，如果绑定了一个生成DOM元素（如列表或其他）的数组，并且该数组中有要更新的元素，而不需要执行.push操作，也不需要使用self.myArray（newArray）重置整个数组，那么就必须在数组中使用一个可观察变量并更新它。

当您修改observable时，它不会重新绘制整个数组，从而使您的动态更改的元素（如DOM数组中的可见/隐藏div）处于相同的状态（如果它们被jQuery或其他什么更改的话）。

相关文章：