Javascript 隐藏和取消隐藏koGrid元素

我最近开始使用koGrid，我真的很喜欢它的几乎所有方面——除了这样一个事实：如果它在页面首次加载时被隐藏，那么您将面临巨大的麻烦

我已经整理了一个JSFIDLE来演示我所说的内容：

如果我设置了两个完全相同的网格，但在页面加载时隐藏了第一个网格，那么当它被取消隐藏时，它看起来非常不稳定

据我所知，这是一个已知的问题：

但是上面线程中提到的解决方法不适用于这个特定问题，正如您从这个JSFIDLE中看到的：

---

有人找到了一个合适的解决方法吗？

尝试将可见绑定移动到koGrid DIV标记本身。这似乎奏效了

<div>
  <div style="width: 50%; height: 200px;" data-bind="visible:visible, koGrid: { data: myObsArray, footerVisible:false }"></div>
  <br/>
  <div style="width: 50%; height: 200px;" data-bind="koGrid: { data: myObsArray, footerVisible:false }"></div>
  <button data-bind="click:toggleFirstGrid">Toggle First Grid Visibility</button>
</div>

切换第一个栅格可见性

---

这是个好主意。不幸的是，在我正在使用的场景中，网格只是一个较大的网格中的一个元素，所有的元素都需要切换。有点像这样：。遗憾的是，这种情况不起作用。

$(function () {
    function vm() {
        var self = this;
        self.myObsArray = ko.observableArray([{
            firstName: 'John',
            lastName: 'Doe'
        }, {
            firstName: 'Jane',
            lastName: 'Doe'
        }]);

        self.visible = ko.observable(false);
        self.toggleFirstGrid = function(){
            self.visible(!self.visible());
        }
    };
    ko.applyBindings(new vm());
});

<div>
  <div style="width: 50%; height: 200px;" data-bind="visible:visible, koGrid: { data: myObsArray, footerVisible:false }"></div>
  <br/>
  <div style="width: 50%; height: 200px;" data-bind="koGrid: { data: myObsArray, footerVisible:false }"></div>
  <button data-bind="click:toggleFirstGrid">Toggle First Grid Visibility</button>
</div>