隐藏和取消隐藏koGrid元素

Question

我最近开始使用koGrid，我真的很喜欢它的几乎所有东西-除了这样一个事实，如果它在页面第一次加载时被隐藏，你会有很大的麻烦。

我已经组合了一个jsfiddle来演示我正在谈论的内容：

http://jsfiddle.net/smithkl42/L5uGT/3/

<div>
    <div data-bind="visible:visible">
        <div id="grid1" style="width: 50%; height: 200px;"
        data-bind = "koGrid: { data: myObsArray, footerVisible:false }" > </div>
    </div>
    <br/>
    <div>
        <div style="width: 50%; height: 200px;"
        data-bind = "koGrid: { data: myObsArray, footerVisible:false }" > </div>
    </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());
});

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

​

​

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

https://groups.google.com/forum/#!msg/knockoutjs/wHpGSUi_Nfo/3i4LY1CMLfkJ

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

http://jsfiddle.net/smithkl42/L5uGT/4/

有没有人想出一个好的解决办法？

Answer 1

尝试将可见绑定移动到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>

http://jsfiddle.net/6abwy/