隐藏和取消隐藏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/