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